@sankhyalabs/ezui 1.2.0-beta.8 → 2.0.0

package/dist/collection/components/ez-combo-box/ez-combo-box.js

@@ -93,7 +93,14 @@ export class EzComboBox {
     if (currentValue) {
       text = this.showSelectedValue ? `${currentValue.value} - ${currentValue.label}` : currentValue.label;
     }
-    return text;
+    if (text == undefined) {
+      return;
+    }
+    return String(text)
+      .replace(/&/g, '&')
+      .replace(/&lt;/g, '<')
+      .replace(/&gt;/g, '>')
+      .replace(/&quot;/g, '"');
   }
   getSelectedOption(value) {
     if (typeof value === "string" || value instanceof String) {
@@ -130,11 +137,11 @@ export class EzComboBox {
     return 0;
   }
   getWidthValue(value) {
-    if (this._itemValueBasis) {
+    if (this._itemValueBasis != undefined) {
       const span = this._itemValueBasis;
-      if (value) {
+      if (value != undefined) {
         span.innerHTML = value;
-        return span.clientWidth > 0 ? (span.clientWidth + 1) : 0;
+        return span.clientWidth > 0 ? (span.clientWidth + 2) : 0;
       }
       else {
         span.innerHTML = "";
@@ -143,9 +150,10 @@ export class EzComboBox {
     return 0;
   }
   buildItem(opt, index) {
+    const widthValue = this.showOptionValue && this._maxWidthValue > 0 ? `${this._maxWidthValue}px` : '';
     return h("li", { class: index === this._preSelection ? "item preselected" : "item", id: `item_${opt.value}`, onMouseDown: () => this.selectOption(opt), onMouseOver: () => this._preSelection = undefined },
       this.showOptionValue
-        ? h("span", { class: "item__value", title: opt.value, style: { width: this.showOptionValue && this._maxWidthValue > 0 ? `${this._maxWidthValue}px` : '' } }, opt.value)
+        ? h("span", { class: "item__value", title: opt.value, style: { width: widthValue, minWidth: widthValue, maxWidth: widthValue } }, opt.value)
         : undefined,
       h("span", { class: "item__label", title: opt.label }, opt.label));
   }
@@ -185,7 +193,7 @@ export class EzComboBox {
   }
   scrollToOption(opt, down) {
     window.requestAnimationFrame(() => {
-      const liElem = this._optionsList.querySelector(`li#item_${opt.value}`);
+      const liElem = (opt === null || opt === void 0 ? void 0 : opt.value) ? this._optionsList.querySelector(`li#item_${opt.value}`) : undefined;
       if (liElem) {
         const parent = liElem.parentElement;
         const parentRect = parent.getBoundingClientRect();
@@ -246,6 +254,7 @@ export class EzComboBox {
     }
     else {
       this.setInputValue();
+      this.hideOptions();
     }
     if (this.searchMode) {
       this._visibleOptions = [];
@@ -258,7 +267,8 @@ export class EzComboBox {
     this._criteria = argument;
     this._startLoading = true;
     if (this.optionLoader) {
-      this.updateSource(this.optionLoader({ mode, argument }));
+      const searchArgument = { mode, argument };
+      this.updateSource(this.optionLoader(searchArgument));
     }
     else {
       this.updateSource(this.options);
@@ -327,7 +337,7 @@ export class EzComboBox {
       this.updateSource([]);
     }
     else {
-      this.loadOptions("PRELOAD");
+      this.loadOptions(SearchMode.PRELOAD);
     }
   }
   componentDidRender() {
@@ -343,7 +353,7 @@ export class EzComboBox {
   // Event handlers
   //---------------------------------------------
   handlerIconClick() {
-    this.searchMode ? this.loadOptions("ADVANCED") : this.showOptions();
+    this.searchMode ? this.loadOptions(SearchMode.ADVANCED) : this.showOptions();
   }
   onTextInputChangeHandler(event) {
     var _a;
@@ -365,7 +375,7 @@ export class EzComboBox {
         this._showLoading = true;
         this.clearSource();
         this._changeDeboucingTimeout = window.setTimeout(() => {
-          this.loadOptions("PREDICTIVE", isNaN(argumentNumber) ? argument : argumentNumber.toString());
+          this.loadOptions(SearchMode.PREDICTIVE, isNaN(argumentNumber) ? argument : argumentNumber.toString());
         }, this._deboucingTime);
       }
       else {
@@ -390,6 +400,17 @@ export class EzComboBox {
   }
   keyDownHandler(event) {
     this._tabPressed = false;
+    if (event.ctrlKey) {
+      if (event.key === "f" || event.key === "F") {
+        this.loadOptions(SearchMode.ADVANCED);
+        //ATENÇÃO: Ctrl + F tem ação específica nos browsers
+        //nesse caso, como vamos abrir o popup de busca avançada,
+        //não é interessante deixar o evento propagar;
+        event.stopPropagation();
+        event.stopImmediatePropagation();
+        event.preventDefault();
+      }
+    }
     switch (event.key) {
       case "ArrowDown":
         this.nextOption();
@@ -408,7 +429,11 @@ export class EzComboBox {
         this.controlListWithOnlyOne();
         break;
     }
-    event.stopPropagation();
+    //ATENÇÃO: Existe a necessidade de propagar o evento de teclado.
+    //Por exemplo, quando o usuário dá um Enter, além de selecionar
+    //um valor, também significa que a ateração finalizou,
+    //e o contexto pode reagir (fechar um popup por exemplo).
+    //event.stopPropagation();
   }
   onTextInputFocusOutHandler() {
     this.cancelPreselection();
@@ -448,10 +473,10 @@ export class EzComboBox {
       "type": "string",
       "mutable": true,
       "complexType": {
-        "original": "Option | string",
-        "resolved": "Option | string",
+        "original": "IOption | string",
+        "resolved": "IOption | string",
         "references": {
-          "Option": {
+          "IOption": {
             "location": "local"
           }
         }
@@ -504,13 +529,13 @@ export class EzComboBox {
       "type": "unknown",
       "mutable": true,
       "complexType": {
-        "original": "Array<Option>",
-        "resolved": "Option[]",
+        "original": "Array<IOption>",
+        "resolved": "IOption[]",
         "references": {
           "Array": {
             "location": "global"
           },
-          "Option": {
+          "IOption": {
             "location": "local"
           }
         }
@@ -702,10 +727,10 @@ export class EzComboBox {
         "text": "Evento que \u00E9 disparado ao alterar o valor do componente"
       },
       "complexType": {
-        "original": "Option",
-        "resolved": "Option",
+        "original": "IOption",
+        "resolved": "IOption",
         "references": {
-          "Option": {
+          "IOption": {
             "location": "local"
           }
         }
@@ -770,3 +795,9 @@ export class EzComboBox {
       "methodName": "observeValue"
     }]; }
 }
+var SearchMode;
+(function (SearchMode) {
+  SearchMode["ADVANCED"] = "ADVANCED";
+  SearchMode["PRELOAD"] = "PRELOAD";
+  SearchMode["PREDICTIVE"] = "PREDICTIVE";
+})(SearchMode || (SearchMode = {}));

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

@@ -29,8 +29,8 @@ export class EzDateInput {
   }
   observeValue(newValue, oldValue) {
     if (this._textInput && newValue != oldValue) {
-      const newValueValidated = this.validateValue(newValue);
-      const oldValueValidated = this.validateValue(oldValue);
+      const newValueValidated = DateUtils.validateDate(newValue);
+      const oldValueValidated = DateUtils.validateDate(oldValue);
       if ((newValueValidated === null || newValueValidated === void 0 ? void 0 : newValueValidated.getTime()) !== (oldValueValidated === null || oldValueValidated === void 0 ? void 0 : oldValueValidated.getTime())) {
         const textValue = this.getTextValue(newValueValidated) || '';
         const parsedDate = DateUtils.strToDate(textValue);
@@ -63,8 +63,8 @@ export class EzDateInput {
     return typeof this.errorMessage === "string" && this.errorMessage.trim() !== "";
   }
   changeValue(newValue) {
-    const currentValue = this.validateValue(this.value);
-    const newValueValidated = this.validateValue(newValue);
+    const currentValue = DateUtils.validateDate(this.value);
+    const newValueValidated = DateUtils.validateDate(newValue);
     if ((currentValue === null || currentValue === void 0 ? void 0 : currentValue.getTime()) !== (newValueValidated === null || newValueValidated === void 0 ? void 0 : newValueValidated.getTime())) {
       this.value = newValueValidated;
     }
@@ -87,8 +87,8 @@ export class EzDateInput {
     const newValue = DateUtils.strToDate(strValue);
     if (newValue || !strValue) {
       this.errorMessage = "";
-      const currentValue = this.validateValue(this.value);
-      const newValueValidated = this.validateValue(newValue);
+      const currentValue = DateUtils.validateDate(this.value);
+      const newValueValidated = DateUtils.validateDate(newValue);
       if ((currentValue === null || currentValue === void 0 ? void 0 : currentValue.getTime()) === (newValueValidated === null || newValueValidated === void 0 ? void 0 : newValueValidated.getTime())) {
         if (newValueValidated) {
           this._textInput.value = this.getTextValue(newValueValidated) || '';
@@ -112,8 +112,8 @@ export class EzDateInput {
   handleInput(event) {
     const strValue = this._textInput.value;
     const newValue = DateUtils.strToDate(strValue);
-    const currentValue = this.validateValue(this.value);
-    const newValueValidated = this.validateValue(newValue);
+    const currentValue = DateUtils.validateDate(this.value);
+    const newValueValidated = DateUtils.validateDate(newValue);
     if ((currentValue === null || currentValue === void 0 ? void 0 : currentValue.getTime()) !== (newValueValidated === null || newValueValidated === void 0 ? void 0 : newValueValidated.getTime())) {
       this._focused = true;
       this.ezStartChange.emit({ waitmessage: "", blocking: false });
@@ -122,11 +122,6 @@ export class EzDateInput {
       this.changeValue(new Date());
     }
   }
-  validateValue(value) {
-    return value instanceof Date && !isNaN(value.valueOf())
-      ? DateUtils.clearTime(value)
-      : undefined;
-  }
   setInputValue() {
     const textValue = this.getTextValue(this.value) || '';
     if ((this._textInput.value || '') !== textValue) {

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

@@ -33,8 +33,8 @@ export class EzDateTimeInput {
   }
   observeValue(newValue, oldValue) {
     if (this._textInput && newValue != oldValue) {
-      const newValueValidated = this.validateValue(newValue);
-      const oldValueValidated = this.validateValue(oldValue);
+      const newValueValidated = DateUtils.validateDate(newValue, true);
+      const oldValueValidated = DateUtils.validateDate(oldValue, true);
       if ((newValueValidated === null || newValueValidated === void 0 ? void 0 : newValueValidated.getTime()) !== (oldValueValidated === null || oldValueValidated === void 0 ? void 0 : oldValueValidated.getTime())) {
         const textValue = this.getTextValue(newValueValidated) || '';
         const parsedDate = this.getParsedDateTime(textValue);
@@ -103,8 +103,8 @@ export class EzDateTimeInput {
     input.setSelectionRange(selectIni, selectFin);
   }
   changeValue(newValue) {
-    const currentValue = this.validateValue(this.value);
-    const newValueValidated = this.validateValue(newValue);
+    const currentValue = DateUtils.validateDate(this.value, true);
+    const newValueValidated = DateUtils.validateDate(newValue, true);
     if ((currentValue === null || currentValue === void 0 ? void 0 : currentValue.getTime()) !== (newValueValidated === null || newValueValidated === void 0 ? void 0 : newValueValidated.getTime())) {
       this.value = newValueValidated;
     }
@@ -133,8 +133,8 @@ export class EzDateTimeInput {
     const newValue = this.getParsedDateTime();
     if (newValue || !strValue) {
       this.errorMessage = "";
-      const currentValue = this.validateValue(this.value);
-      const newValueValidated = this.validateValue(newValue);
+      const currentValue = DateUtils.validateDate(this.value, true);
+      const newValueValidated = DateUtils.validateDate(newValue, true);
       if ((currentValue === null || currentValue === void 0 ? void 0 : currentValue.getTime()) === (newValueValidated === null || newValueValidated === void 0 ? void 0 : newValueValidated.getTime())) {
         if (newValueValidated) {
           this._textInput.value = this.getTextValue(newValueValidated) || '';
@@ -163,15 +163,10 @@ export class EzDateTimeInput {
     };
     return d ? (new Intl.DateTimeFormat('pt-BR', this.showSeconds ? optionsSecond : options).format(d)) : undefined;
   }
-  validateValue(value) {
-    return value instanceof Date && !isNaN(value.valueOf())
-      ? value
-      : undefined;
-  }
   handleInput(event) {
     const newValue = this.getParsedDateTime();
-    const currentValue = this.validateValue(this.value);
-    const newValueValidated = this.validateValue(newValue);
+    const currentValue = DateUtils.validateDate(this.value, true);
+    const newValueValidated = DateUtils.validateDate(newValue, true);
     if ((currentValue === null || currentValue === void 0 ? void 0 : currentValue.getTime()) !== (newValueValidated === null || newValueValidated === void 0 ? void 0 : newValueValidated.getTime())) {
       this._focused = true;
       this.ezStartChange.emit({ waitmessage: "", blocking: false });

package/dist/collection/components/ez-dialog/DialogType.js

@@ -2,5 +2,6 @@ export var DialogType;
 (function (DialogType) {
   DialogType["WARN"] = "warn";
   DialogType["CRITICAL"] = "critical";
+  DialogType["SUCCESS"] = "success";
   DialogType["DEFAULT"] = "default";
 })(DialogType || (DialogType = {}));

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

@@ -40,10 +40,12 @@
   /* Ícones */
   /*@doc Define a cor dos ícones dos indicadores de modo.*/
   --dialog__icon--color: var(--text--inverted, #fff);
-  /*@doc Define a cor de fundo dos indicadores do modo crítico.*/
+  /*@doc Define a cor do indicador do dialog de erro.*/
   --dialog__critical--background-color: var(--color--alert-error-800, #BD0025);
-  /*@doc Define a cor de fundo da lista de opções.*/
+  /*@doc Define a cor do indicador do dialog de alert.*/
   --dialog__warning--background-color: var(--color--alert-warning-500, #EFB103);
+  /*@doc Define a cor do indicador do dialog de sucesso.*/
+  --dialog__success--background-color: var(--color--alert-success-500, #00523c);
   
   /*@doc Define a camada que o dialog será exibido.*/
   --dialog-z-index: var(--most-visible, 3);
@@ -123,6 +125,13 @@ h2 {
   background-color: var(--dialog__warning--background-color);
 }
 
+.dialog__success--indicator{
+  width: 12px;
+  border-radius: 6px 0px 0px 6px;
+  box-sizing: border-box;
+  background-color: var(--dialog__success--background-color);
+}
+
 .message {
   font-size: var(--dialog__body--font-size);
   font-weight: var(--dialog__body--text-weight--medium);
@@ -178,23 +187,18 @@ h2 {
   padding-left: 0;
 }
 
-.title-icon {
-  outline: none;
-  border: none;
-  background-color: var(--dialog__warning--background-color);
-  width: 26px;
-  height: 26px;
-  border-radius: 100%;
-  padding: 0;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-
 .title-icon--critical {
   background-color: var(--dialog__critical--background-color);
 }
 
+.title-icon--success {
+  background-color: var(--dialog__success--background-color);
+}
+
+.title-icon--warn {
+  background-color: var(--dialog__warning--background-color);
+}
+
 .btn-close {
   justify-content: flex-end;
   align-self: flex-start;
@@ -227,16 +231,6 @@ h2 {
   mask-image: var(--dialog--warning__image);
 }
 
-.title-icon--critical::after {
-  content: '';
-  display: flex;
-  background-color: #FFFF;
-  width: 13px;
-  height: 13px;
-  -webkit-mask-image: var(--dialog--critical__image);
-  mask-image: var(--dialog--critical__image);
-}
-
 .button-yes-no__container {
   display: flex;
   box-sizing: border-box;

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

@@ -55,19 +55,54 @@ export class EzDialog {
     return dialogType === DialogType.CRITICAL;
   }
   getIconElement(message) {
-    if (message.icon) {
-      return h("ez-icon", { class: this.isCritical(message.dialogType) ? "changeable__icon critical" : "changeable__icon", size: "small", iconName: message.icon });
-    }
     if (message.dialogType === DialogType.DEFAULT) {
       return;
     }
-    return h("div", { class: this.isCritical(message.dialogType) ? "title-icon title-icon--critical" : "title-icon" });
+    return h("ez-icon", { class: "changeable__icon " + this.getIconClass(message.dialogType), size: "small", iconName: this.getIconName(message) });
+  }
+  getIconClass(dialogType) {
+    if (this.isCritical(dialogType)) {
+      return "title-icon--critical";
+    }
+    else if (dialogType === DialogType.SUCCESS) {
+      return "title-icon--success";
+    }
+    else if (dialogType === DialogType.WARN) {
+      return "title-icon--warn";
+    }
+    return "";
+  }
+  getIconName(message) {
+    if (message.icon) {
+      return message.icon;
+    }
+    else if (this.isCritical(message.dialogType)) {
+      return "alert-circle-inverted";
+    }
+    else if (message.dialogType === DialogType.WARN) {
+      return "warning-outline";
+    }
+    else if (message.dialogType === DialogType.SUCCESS) {
+      return "check";
+    }
   }
   getTypeIndicatorElement(message) {
     if (message.dialogType === DialogType.DEFAULT) {
       return;
     }
-    return h("div", { class: this.isCritical(message.dialogType) ? "dialog__critical--indicator" : "dialog__warning--indicator" });
+    return h("div", { class: this.getClassIconIndicator(message.dialogType) });
+  }
+  getClassIconIndicator(dialogType) {
+    if (this.isCritical(dialogType)) {
+      return "dialog__critical--indicator";
+    }
+    else if (dialogType == DialogType.SUCCESS) {
+      return "dialog__success--indicator";
+    }
+    else if (dialogType == DialogType.WARN) {
+      return "dialog__warning--indicator";
+    }
+    return "";
   }
   getClassContainer(message) {
     const type = message.dialogType || DialogType.DEFAULT;
@@ -142,7 +177,7 @@ export class EzDialog {
       "mutable": true,
       "complexType": {
         "original": "DialogType",
-        "resolved": "DialogType.CRITICAL | DialogType.DEFAULT | DialogType.WARN",
+        "resolved": "DialogType.CRITICAL | DialogType.DEFAULT | DialogType.SUCCESS | DialogType.WARN",
         "references": {
           "DialogType": {
             "location": "import",

package/dist/collection/components/ez-form/DataBinder.js

@@ -18,6 +18,7 @@ export default class DataBinder {
         case Action.DATA_CHANGED:
         case Action.CHANGE_UNDONE:
         case Action.CHANGE_REDONE:
+        case Action.RECORD_LOADED:
           (_a = this._fields) === null || _a === void 0 ? void 0 : _a.forEach(field => {
             this.updateValue(field.fieldName, field.field);
           });

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

@@ -1,5 +1,5 @@
 import { Component, h, Host, Prop, Element, forceUpdate, Method, Watch, Event } from "@stencil/core";
-import { DataUnit, Action, DataUnitAction } from "@sankhyalabs/core";
+import { DataUnit, Action, DataUnitAction, DateUtils } from "@sankhyalabs/core";
 import { FormSheet } from "./structure/FormSheet";
 import { buildFromConfig, buildFromDataUnit } from "./structure/FormSheetMetadata";
 import { createStore } from "redux";
@@ -101,7 +101,7 @@ export class EzForm {
   }
   processMetadata() {
     if (!this.isStatic() && this.dataUnit) {
-      const metadata = this.config && this.config.length > 0 ? buildFromConfig(this.config, this.dataUnit) : buildFromDataUnit(this.dataUnit);
+      const metadata = this.config != undefined ? buildFromConfig(this.config, this.dataUnit) : buildFromDataUnit(this.dataUnit);
       this._store.dispatch(loadMetadata(metadata));
     }
   }
@@ -109,6 +109,16 @@ export class EzForm {
     var _a;
     return ((_a = this._staticFields) === null || _a === void 0 ? void 0 : _a.length) > 0;
   }
+  getValidatedValue(value) {
+    switch (value) {
+      case "${data}":
+        return DateUtils.getToday();
+      case "${datahora}":
+        return DateUtils.getToday(true);
+      default:
+        return value;
+    }
+  }
   interceptAction(action) {
     if (action.type === Action.RECORDS_COPIED) {
       const metadata = selectFormMetadata(this._store.getState());
@@ -137,7 +147,9 @@ export class EzForm {
         return new DataUnitAction(Action.RECORDS_ADDED, records.map(record => {
           const newRecord = Object.assign({}, record);
           for (const field in defaultValues) {
-            newRecord[field] = this.dataUnit.valueFromString(field, defaultValues[field]);
+            const defaultValue = defaultValues[field].value;
+            const fieldValue = defaultValue != undefined ? defaultValue : defaultValues[field];
+            newRecord[field] = this.dataUnit.valueFromString(field, this.getValidatedValue(fieldValue));
           }
           return newRecord;
         }));
@@ -201,13 +213,10 @@ export class EzForm {
       "type": "unknown",
       "mutable": false,
       "complexType": {
-        "original": "Array<FieldConfig>",
-        "resolved": "FieldConfig[]",
+        "original": "IFormConfig",
+        "resolved": "IFormConfig",
         "references": {
-          "Array": {
-            "location": "global"
-          },
-          "FieldConfig": {
+          "IFormConfig": {
             "location": "local"
           }
         }
@@ -223,10 +232,10 @@ export class EzForm {
       "type": "unknown",
       "mutable": false,
       "complexType": {
-        "original": "RecordValidator",
-        "resolved": "RecordValidator",
+        "original": "IRecordValidator",
+        "resolved": "IRecordValidator",
         "references": {
-          "RecordValidator": {
+          "IRecordValidator": {
             "location": "local"
           }
         }
@@ -303,7 +312,7 @@ export class EzForm {
             "location": "import",
             "path": "@sankhyalabs/core"
           },
-          "ValidationResult": {
+          "IValidationResult": {
             "location": "local"
           }
         },

package/dist/collection/components/ez-form/fieldbuilder/FieldBuilder.js

@@ -31,17 +31,17 @@ export const buildField = (field) => {
     if (!config.name) {
       config.name = descriptor.name;
     }
-    if (config.required === undefined) {
+    if (config.required == undefined || descriptor.required === true) {
       config.required = descriptor.required;
     }
-    if (config.readOnly === undefined) {
+    if (config.readOnly == undefined || descriptor.readOnly === true) {
       config.readOnly = descriptor.readOnly;
     }
     props = descriptor.properties;
     builder = uiBuilders.get(descriptor.userInterface);
   }
   if (config.required) {
-    config.label = `* ${config.label} (obrigatório)`;
+    config.label = `${config.label} (obrigatório) *`;
   }
   if (!builder) {
     builder = buildTextInput;

package/dist/collection/components/ez-form/fieldbuilder/tpl/CheckBox.tpl.js

@@ -1,4 +1,5 @@
 import { h } from "@stencil/core";
+import { CheckMode } from "../../../ez-check/CheckMode";
 export const buildSwitch = (fieldConfig) => {
   return buildField(fieldConfig.name, fieldConfig.label, fieldConfig.readOnly, true);
 };
@@ -7,5 +8,5 @@ export const buildCheckBox = (fieldConfig) => {
 };
 function buildField(fieldName, fieldLabel, readOnly, switchMode = false) {
   return (h("div", { class: "ez-col ez-col--sd-12 ez-col--tb-3 ez-align--middle ez-padding-horizontal--small ez-padding-bottom--large" },
-    h("ez-check", { enabled: !readOnly, label: fieldLabel, mode: switchMode ? "switch" : "regular", "data-field-name": fieldName, key: fieldName })));
+    h("ez-check", { enabled: !readOnly, label: fieldLabel, mode: switchMode ? CheckMode.SWITCH : CheckMode.REGULAR, "data-field-name": fieldName, key: fieldName })));
 }

package/dist/collection/components/ez-form/fieldbuilder/tpl/DateInput.tpl.js

@@ -3,11 +3,11 @@ export const buildDate = ({ name, label, readOnly }) => {
   return (h("div", { class: "ez-col ez-col--sd-12 ez-col--tb-3 ez-padding-horizontal--small" },
     h("ez-date-input", { enabled: !readOnly, label: label, "data-field-name": name, key: name })));
 };
-export const buildTime = ({ name, label }) => {
+export const buildTime = ({ name, label, readOnly }) => {
   return (h("div", { class: "ez-col ez-col--sd-12 ez-col--tb-3 ez-padding-horizontal--small" },
-    h("ez-time-input", { label: label, "data-field-name": name, key: name })));
+    h("ez-time-input", { enabled: !readOnly, label: label, "data-field-name": name, key: name })));
 };
-export const buildTimeDate = ({ name, label }) => {
+export const buildTimeDate = ({ name, label, readOnly }) => {
   return (h("div", { class: "ez-col ez-col--sd-12 ez-col--tb-3 ez-padding-horizontal--small" },
-    h("ez-date-time-input", { label: label, "data-field-name": name, key: name })));
+    h("ez-date-time-input", { enabled: !readOnly, label: label, "data-field-name": name, key: name })));
 };

package/dist/collection/components/ez-form/structure/FormSheetMetadata.js

@@ -59,35 +59,45 @@ function getTabConfig(tab, sheets) {
 function sortTabs(a, b) {
   return a[0].label == '__main' ? -1 : (a[0].order || 10000) - (b[0].order || 10000);
 }
-export const buildFromConfig = (fields, dataUnit) => {
+export const buildFromConfig = (config, dataUnit) => {
+  var _a, _b;
   const sheets = new Map();
+  const hiddenTabs = new Map();
   const requiredFields = [];
   const cleanOnCopyFields = [];
   const defaultValues = {};
-  fields.forEach(config => {
+  (_a = config === null || config === void 0 ? void 0 : config.tabs) === null || _a === void 0 ? void 0 : _a.forEach((tab) => {
+    if (!hiddenTabs.has(tab.label) && tab.visible === false) {
+      hiddenTabs.set(tab.label, tab);
+    }
+  });
+  (_b = config === null || config === void 0 ? void 0 : config.fields) === null || _b === void 0 ? void 0 : _b.forEach((field) => {
     var _a, _b, _c;
-    if (config.visible !== false) {
-      const tabConfig = getTabConfig(config.tab || "__main", sheets);
-      const descriptor = dataUnit.getField(config.name);
+    if (field.visible !== false) {
+      const tabConfig = getTabConfig(field.tab || "__main", sheets);
+      if (hiddenTabs.has(tabConfig.label)) {
+        return;
+      }
+      const descriptor = dataUnit.getField(field.name);
       if (descriptor && tabConfig.visible) {
         if (!sheets.has(tabConfig)) {
           sheets.set(tabConfig, new Map());
         }
         const tabItens = sheets.get(tabConfig);
-        const isRequired = config.required === undefined ? descriptor.required : config.required;
+        const isRequired = field.required == undefined ? descriptor.required : field.required;
         if (isRequired) {
-          requiredFields.push(config.name);
+          requiredFields.push(field.name);
         }
-        const clearOnCopy = config.cleanOnCopy === undefined ? (((_a = descriptor.properties) === null || _a === void 0 ? void 0 : _a.cleanOnCopy) || ((_b = descriptor.properties) === null || _b === void 0 ? void 0 : _b.autoNum)) : config.cleanOnCopy;
-        if (clearOnCopy) {
-          cleanOnCopyFields.push(config.name);
+        const cleanOnCopy = field.cleanOnCopy == undefined ? (_a = descriptor.properties) === null || _a === void 0 ? void 0 : _a.cleanOnCopy : field.cleanOnCopy;
+        if (cleanOnCopy || ((_b = descriptor.properties) === null || _b === void 0 ? void 0 : _b.autoNum)) {
+          cleanOnCopyFields.push(field.name);
         }
-        const defaultValue = config.defaultValue === undefined ? (_c = descriptor.properties) === null || _c === void 0 ? void 0 : _c.defaultValue : config.defaultValue;
+        const defaultValue = field.defaultValue == undefined ? (_c = descriptor.properties) === null || _c === void 0 ? void 0 : _c.defaultValue : field.defaultValue;
         if (defaultValue) {
-          defaultValues[config.name] = config.defaultValue;
+          defaultValues[field.name] = field.defaultValue;
         }
-        const fieldMD = { config, descriptor };
-        const group = config.group;
+        const fieldMD = { config: field, descriptor };
+        const group = field.group;
         if (group) {
           const key = `group::${group}`;
           if (!tabItens.has(key)) {
@@ -98,7 +108,7 @@ export const buildFromConfig = (fields, dataUnit) => {
           }
         }
         else {
-          tabItens.set(config.name, fieldMD);
+          tabItens.set(field.name, fieldMD);
         }
       }
     }

package/dist/collection/components/ez-grid/controller/DataUnitBridge.js

@@ -26,6 +26,9 @@ export default class DataUnitBridge {
           const changes = Object.assign({}, action.payload);
           delete changes.records;
           this._gridController.changeValues(changes, action.payload.records);
+          break;
+        case Action.RECORD_LOADED:
+          this._gridController.changeValues(changes, action.payload.records);
       }
     };
     this._gridController = gridController;