@sankhyalabs/ezui 1.1.161 → 1.2.0-beta.1

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

@@ -68,10 +68,7 @@ export class EzDateTimeInput {
   }
   handleKeyDown(event) {
     const input = this._textInput.shadowRoot.querySelector('input');
-    if (event.key === "H" || event.key === "h") {
-      this.changeValue(new Date());
-    }
-    else if (event.shiftKey && event.key === "Tab") {
+    if (event.shiftKey && event.key === "Tab") {
       if (input.selectionStart > 0) {
         let selectIni = input.value.lastIndexOf(" ", input.selectionStart);
         if (selectIni !== -1) {
@@ -171,7 +168,7 @@ export class EzDateTimeInput {
       ? value
       : undefined;
   }
-  handleInput() {
+  handleInput(event) {
     const newValue = this.getParsedDateTime();
     const currentValue = this.validateValue(this.value);
     const newValueValidated = this.validateValue(newValue);
@@ -179,6 +176,9 @@ export class EzDateTimeInput {
       this._focused = true;
       this.ezStartChange.emit({ waitmessage: "", blocking: false });
     }
+    if (event['data'] === "H" || event['data'] === "h") {
+      this.changeValue(new Date());
+    }
   }
   setInputValue() {
     const textValue = this.getTextValue(this.value) || '';
@@ -192,7 +192,7 @@ export class EzDateTimeInput {
   }
   render() {
     return (h(Host, null,
-      h("ez-text-input", { ref: elem => this._textInput = elem, "data-slave-mode": "true", label: this.label, restrict: "0123456789/: ", enabled: this.enabled, errorMessage: this.errorMessage, mode: this.mode, onKeyDown: event => { this.handleKeyDown(event); }, onBlur: () => this.handleBlur(), onInput: () => this.handleInput(), onFocus: () => this.handleFocus(), onClick: () => this.handleClick() },
+      h("ez-text-input", { ref: elem => this._textInput = elem, "data-slave-mode": "true", label: this.label, restrict: "0123456789/: ", enabled: this.enabled, errorMessage: this.errorMessage, mode: this.mode, onKeyDown: event => { this.handleKeyDown(event); }, onBlur: () => this.handleBlur(), onInput: (evt) => this.handleInput(evt), onFocus: () => this.handleFocus(), onClick: () => this.handleClick() },
         h("button", { disabled: !this.enabled, tabindex: -1, class: "btn-open-cal", onClick: () => this.showCalendar(), slot: "leftIcon" })),
       h("ez-calendar", { onEzChange: (event) => { this.changeValue(this._calendar.value); event.stopPropagation(); }, floating: true, ref: elem => this._calendar = elem, time: true, showSeconds: this.showSeconds })));
   }

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

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

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

@@ -105,6 +105,10 @@ h2 {
   padding: var(--dialog__container-padding)
 }
 
+.dialog__container--default {
+  border-radius: 6px 6px 6px 6px;
+}
+
 .dialog__critical--indicator {
   box-sizing: border-box;
   width: 12px;
@@ -166,10 +170,14 @@ h2 {
   align-self: center;
 }
 
-.title--label {
+.title__label {
   padding-left: var(--dialog__title--padding-left);
 }
 
+.title__label--no-icon{
+  padding-left: 0;
+}
+
 .title-icon {
   outline: none;
   border: none;

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

@@ -1,9 +1,10 @@
 import { Component, h, Prop, Method, Event, forceUpdate } from "@stencil/core";
+import { DialogType } from "./DialogType";
 class Message {
-  constructor(title, message, critical, confirm, icon, labelCancel, labelConfirm, btnConfirmDanger, callBack) {
+  constructor(title, message, dialogType, confirm, icon, labelCancel, labelConfirm, btnConfirmDanger, callBack) {
     this.title = title;
     this.message = message;
-    this.critical = critical;
+    this.dialogType = dialogType;
     this.confirm = confirm;
     this.icon = icon;
     this.labelCancel = labelCancel;
@@ -21,10 +22,6 @@ export class EzDialog {
      * Define se o componente será utilizado no modo de confirmação.
      */
     this.confirm = false;
-    /**
-    * Define se o componente terá o visual de erro ou de aviso
-    */
-    this.critical = false;
     /**
      * Controla a exibição do componente
      */
@@ -48,12 +45,37 @@ export class EzDialog {
   /**
    * Faz com que o componente seja exibido.
    */
-  async show(title, message, critical, confirm, icon, labelCancel, labelConfirm, btnConfirmDanger) {
+  async show(title, message, dialogType, confirm, icon, labelCancel, labelConfirm, btnConfirmDanger) {
     this.opened = true;
     return new Promise(resolve => {
-      this._messageQueue.push(new Message(title, message, critical, confirm, icon, labelCancel, labelConfirm, btnConfirmDanger, resolve));
+      this._messageQueue.push(new Message(title, message, dialogType, confirm, icon, labelCancel, labelConfirm, btnConfirmDanger, resolve));
     });
   }
+  isCritical(dialogType) {
+    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" });
+  }
+  getTypeIndicatorElement(message) {
+    if (message.dialogType === DialogType.DEFAULT) {
+      return;
+    }
+    return h("div", { class: this.isCritical(message.dialogType) ? "dialog__critical--indicator" : "dialog__warning--indicator" });
+  }
+  getClassContainer(message) {
+    const type = message.dialogType || DialogType.DEFAULT;
+    return type === DialogType.DEFAULT ? "dialog__container dialog__container--default" : "dialog__container";
+  }
+  getClassTitleLabel(message) {
+    return this.getIconElement(message) == undefined ? "title title__label title__label--no-icon" : "title title__label";
+  }
   componentWillRender() {
     if (!this._currentMessage) {
       if (this._messageQueue.length > 0) {
@@ -61,7 +83,7 @@ export class EzDialog {
       }
       else {
         if (this.opened) {
-          this._currentMessage = new Message(this.ezTitle, this.message, this.critical, this.confirm, this.personalizedIconPath, this.labelCancel, this.labelConfirm, this.btnConfirmDanger, null);
+          this._currentMessage = new Message(this.ezTitle, this.message, this.dialogType, this.confirm, this.personalizedIconPath, this.labelCancel, this.labelConfirm, this.btnConfirmDanger, null);
         }
       }
     }
@@ -70,15 +92,12 @@ export class EzDialog {
     if (this.opened && this._currentMessage) {
       return (h("div", { class: "overlay" },
         h("div", { class: "dialog" },
-          h("div", { class: this._currentMessage.critical === true ? "dialog__critical--indicator" : "dialog__warning--indicator" }),
-          h("div", { class: "dialog__container" },
+          this.getTypeIndicatorElement(this._currentMessage),
+          h("div", { class: this.getClassContainer(this._currentMessage) },
             h("div", { class: "title__container" },
               h("div", { class: "title__box" },
-                this._currentMessage.icon ?
-                  h("ez-icon", { class: this._currentMessage.critical ? "changeable__icon critical" : "changeable__icon", size: "small", iconName: this._currentMessage.icon })
-                  :
-                    h("div", { class: this._currentMessage.critical ? "title-icon title-icon--critical" : "title-icon" }),
-                h("div", { class: "title title--label", innerHTML: this._currentMessage.title })),
+                this.getIconElement(this._currentMessage),
+                h("div", { class: this.getClassTitleLabel(this._currentMessage), innerHTML: this._currentMessage.title })),
               h("button", { class: "btn-close", onClick: () => this.handleButtonClick(false) })),
             h("div", { class: "message", innerHTML: this._currentMessage.message }),
             this._currentMessage.confirm &&
@@ -118,23 +137,27 @@ export class EzDialog {
       "reflect": false,
       "defaultValue": "false"
     },
-    "critical": {
-      "type": "boolean",
+    "dialogType": {
+      "type": "string",
       "mutable": true,
       "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
+        "original": "DialogType",
+        "resolved": "DialogType.CRITICAL | DialogType.DEFAULT | DialogType.WARN",
+        "references": {
+          "DialogType": {
+            "location": "import",
+            "path": "./DialogType"
+          }
+        }
       },
       "required": false,
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "Define se o componente ter\u00E1 o visual de erro ou de aviso"
+        "text": "Define se o componente ter\u00E1 o visual padr\u00E3o, de erro ou de aviso"
       },
-      "attribute": "critical",
-      "reflect": false,
-      "defaultValue": "false"
+      "attribute": "dialog-type",
+      "reflect": false
     },
     "message": {
       "type": "string",
@@ -259,7 +282,7 @@ export class EzDialog {
     },
     "show": {
       "complexType": {
-        "signature": "(title: string, message: string, critical: boolean, confirm: boolean, icon: string, labelCancel: string, labelConfirm: string, btnConfirmDanger: boolean) => Promise<boolean>",
+        "signature": "(title: string, message: string, dialogType: DialogType, confirm: boolean, icon: string, labelCancel: string, labelConfirm: string, btnConfirmDanger: boolean) => Promise<boolean>",
         "parameters": [{
             "tags": [],
             "text": ""
@@ -288,6 +311,10 @@ export class EzDialog {
         "references": {
           "Promise": {
             "location": "global"
+          },
+          "DialogType": {
+            "location": "import",
+            "path": "./DialogType"
           }
         },
         "return": "Promise<boolean>"

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

@@ -1,6 +1,7 @@
 import { ApplicationContext, Action, WaitingChangeException } from "@sankhyalabs/core";
 export default class DataBinder {
   constructor(dataUnit) {
+    this._invalidFields = new Map();
     this.onDataUnitEvent = (action) => {
       var _a;
       switch (action.type) {
@@ -9,15 +10,16 @@ export default class DataBinder {
         case Action.RECORDS_REMOVED:
         case Action.RECORDS_ADDED:
         case Action.RECORDS_COPIED:
-        case Action.DATA_CHANGED:
         case Action.EDITION_CANCELED:
-        case Action.CHANGE_UNDONE:
-        case Action.CHANGE_REDONE:
         case Action.SELECTION_CHANGED:
         case Action.NEXT_SELECTED:
         case Action.PREVIOUS_SELECTED:
+          this.clearInvalid();
+        case Action.DATA_CHANGED:
+        case Action.CHANGE_UNDONE:
+        case Action.CHANGE_REDONE:
           (_a = this._fields) === null || _a === void 0 ? void 0 : _a.forEach(field => {
-            this.updateValue(field.fieldName, field.field, action.type === Action.EDITION_CANCELED);
+            this.updateValue(field.fieldName, field.field);
           });
           break;
       }
@@ -35,24 +37,45 @@ export default class DataBinder {
   onDisconnectedCallback() {
     this._dataUnit.unsubscribe(this.onDataUnitEvent);
   }
-  updateValue(fieldName, field, actionCanceled = false) {
-    var _a;
-    field["value"] = this._dataUnit.getFieldValue(fieldName);
-    /**
-     * FIXME: Campo já salvo com undefined, ao inserir valor inválido e cancelar,
-     * o campo não é limpo e atualizado automaticamente, pois o value não mudou,
-     * assim, não dispara o Watch do value, que é o responsável por limpar o errorMessage.
-     */
-    if (actionCanceled && ((_a = field["errorMessage"]) === null || _a === void 0 ? void 0 : _a.trim())) {
-      field["errorMessage"] = "";
+  markInvalid(field) {
+    this._invalidFields.set(field.name, field);
+    if (this._fields.has(field.name)) {
+      this.updateErrorMessage(field.name, this._fields.get(field.name).field);
+    }
+  }
+  clearInvalid() {
+    this._invalidFields.clear();
+    this._fields.forEach(fieldBinder => {
+      const fieldName = fieldBinder.field.dataset.fieldName;
+      this.updateErrorMessage(fieldName, fieldBinder.field);
+    });
+  }
+  updateValue(fieldName, field) {
+    const bind = this._fields.get(fieldName);
+    try {
+      if (bind) {
+        bind.listen = false;
+      }
+      field["value"] = this._dataUnit.getFieldValue(fieldName);
+      this.updateErrorMessage(fieldName, field);
+    }
+    finally {
+      if (bind) {
+        bind.listen = true;
+      }
     }
   }
+  updateErrorMessage(fieldName, field) {
+    const invalidField = this._invalidFields.get(fieldName);
+    field["errorMessage"] = invalidField ? invalidField.message : "";
+  }
   updateBind(fieldName, field) {
     const oldBind = this._fields.get(fieldName);
     if (oldBind) {
       oldBind.destroy();
     }
-    this.updateValue(fieldName, field);
+    field["value"] = this._dataUnit.getFieldValue(fieldName);
+    this.updateErrorMessage(fieldName, field);
     this._fields.set(fieldName, Bind.create(fieldName, field, (fieldName, waitingChange) => this.changeStarted(fieldName, waitingChange), (fieldName) => this.cancelWaitingChange(fieldName), (fieldName, newValue) => this.setFieldValue(fieldName, newValue)));
     this.bindSearchOptionsLoader(fieldName, field);
     this.applyEzUploadContext(fieldName, field);
@@ -93,6 +116,7 @@ export default class DataBinder {
     if (this._dataUnit.records.length === 0) {
       this._dataUnit.addRecord();
     }
+    this._invalidFields.delete(fieldName);
     this._dataUnit.setFieldValue(fieldName, newValue);
     if (this._dataUnit.waitingForChange(fieldName)) {
       const bind = this._fields.get(fieldName);
@@ -127,6 +151,7 @@ export default class DataBinder {
 }
 class Bind {
   constructor() {
+    this.listen = true;
     this.startChangeEventName = "ezStartChange";
     this.cancelWaitingChangeEventName = "ezCancelWaitingChange";
     this.changeEventName = "ezChange";
@@ -154,11 +179,14 @@ class Bind {
     const b = new Bind();
     b.field = field;
     b.fieldName = fieldName;
-    b.startChangeListener = (evt) => { startChangeCallback(fieldName, evt.detail); };
+    b.startChangeListener = (evt) => { if (b.listen)
+      startChangeCallback(fieldName, evt.detail); };
     b.field.addEventListener(b.startChangeEventName, b.startChangeListener);
-    b.cancelWaitingChangeListener = () => { cancelWaitingChangeCallback(fieldName); };
+    b.cancelWaitingChangeListener = () => { if (b.listen)
+      cancelWaitingChangeCallback(fieldName); };
     b.field.addEventListener(b.cancelWaitingChangeEventName, b.cancelWaitingChangeListener);
-    b.changeListener = (evt) => { changeCallback(fieldName, evt.detail); };
+    b.changeListener = (evt) => { if (b.listen)
+      changeCallback(fieldName, evt.detail); };
     b.field.addEventListener(b.changeEventName, b.changeListener);
     return b;
   }

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

@@ -21,88 +21,66 @@ export class EzForm {
     return Promise.resolve();
   }
   validate() {
-    return new Promise(async (accept, reject) => {
-      const metadata = selectFormMetadata(this._store.getState());
-      const requiredFields = this._staticFields
-        .filter(f => f.dataset.required)
-        .map(f => f.dataset.fieldName)
-        .concat(metadata.getRequiredFields());
-      let isReject = false;
+    return new Promise((accept, reject) => {
+      var _a;
       const records = this.dataUnit.getModifiedRecords();
       for (let i = 0; i < records.length; i++) {
-        if (!this.validateRequired(requiredFields, records[i])) {
-          isReject = true;
-          break;
+        const record = records[i];
+        const invalidResults = [];
+        let validationResult = this.validateRequired(record);
+        if (validationResult && !validationResult.isValid) {
+          invalidResults.push(validationResult);
         }
-      }
-      if (!isReject) {
-        const validateError = await this.validateError();
-        if (!validateError) {
-          isReject = true;
+        validationResult = (_a = this.recordsValidator) === null || _a === void 0 ? void 0 : _a.validateRecord(this, record);
+        if (validationResult && !validationResult.isValid) {
+          invalidResults.push(validationResult);
+        }
+        if (invalidResults.length > 0) {
+          this.processValidationResult(invalidResults);
+          reject();
+          break;
         }
       }
-      if (isReject) {
-        reject();
-      }
-      else {
-        accept();
-      }
+      accept();
     });
   }
   observeConfig() {
     this.processMetadata();
   }
-  async validateError() {
-    var _a;
-    const invalidFields = [];
-    const dataFields = (_a = this._element) === null || _a === void 0 ? void 0 : _a.querySelectorAll("[data-field-name]");
-    if (dataFields && dataFields.length > 0) {
-      for (let i = 0; i < dataFields.length; i++) {
-        const fieldElem = dataFields[i];
-        if (fieldElem && fieldElem['isInvalid']) {
-          const hasError = await fieldElem['isInvalid']();
-          if (hasError && fieldElem['dataset']) {
-            invalidFields.push(fieldElem['dataset'].fieldName);
-          }
-        }
-      }
-      ;
-    }
-    const isValid = invalidFields.length === 0;
-    if (!isValid) {
-      ApplicationUtils.info("Há pelo menos um campo com conteúdo inválido.");
-    }
-    return isValid;
-  }
-  validateRequired(requiredFields, record) {
+  validateRequired(record) {
+    const metadata = selectFormMetadata(this._store.getState());
+    const requiredFields = this._staticFields
+      .filter(f => f.dataset.required)
+      .map(f => f.dataset.fieldName)
+      .concat(metadata.getRequiredFields());
     const invalidFields = [];
     requiredFields.forEach(field => {
       const value = record[field];
-      const fieldElem = this._element.querySelector(`[data-field-name=${field}]`);
-      /**
-       * TODO: fieldElem vai ser vazio quando o campo está em uma aba que
-       * está escondida.
-       * Temos que tratar esse caso para apresentar a mensagem de erro
-       * na aba, isso será tratado no card: https://sankhya.atlassian.net/browse/SKA-44182
-       */
-      if (fieldElem) {
-        /**
-         * Devido o StencilJS não possuir Getter e Setter, para casos que o Watch não for chamado,
-         * é necessário limpar a propriedade antes de setar o valor novamente, para que o Watch seja disparado novamente,
-         * solução necessária para controlar componentes com herança (Exemplo: EzSearch -> EzComboBox -> EzTextInput).
-         */
-        fieldElem["errorMessage"] = "";
-        if (value === null || value === undefined || value === "") {
-          invalidFields.push(field);
-          fieldElem["errorMessage"] = "Essa informação é obrigatória";
-        }
+      if (value == undefined || value === "") {
+        invalidFields.push({ name: field, message: "Essa informação é obrigatória" });
       }
     });
-    const isValid = invalidFields.length === 0;
-    if (!isValid) {
-      ApplicationUtils.info("Há pelo menos um campo obrigatório não preenchido.");
+    if (invalidFields.length > 0) {
+      return { isValid: false, invalidFields, infoMessage: "Há pelo menos um campo obrigatório não preenchido." };
     }
-    return isValid;
+    return undefined;
+  }
+  processValidationResult(validationResult) {
+    validationResult.forEach(invalidResult => {
+      const invalidFields = invalidResult.invalidFields;
+      if (invalidFields) {
+        invalidFields.forEach(field => {
+          this._dataBinder.markInvalid(field);
+        });
+      }
+      if (invalidResult.infoMessage) {
+        ApplicationUtils.info(invalidResult.infoMessage);
+      }
+      if (invalidResult.errorMessage) {
+        const { errorTitle, errorMessage } = invalidResult;
+        ApplicationUtils.error(errorTitle, errorMessage);
+      }
+    });
   }
   getDynamicContent() {
     var _a;
@@ -144,6 +122,13 @@ export class EzForm {
         }));
       }
     }
+    if (action.type === Action.SAVING_DATA) {
+      return new Promise((resolve) => {
+        this.validate()
+          .then(() => resolve(action))
+          .catch(() => { });
+      });
+    }
     if (action.type === Action.RECORDS_ADDED) {
       const metadata = selectFormMetadata(this._store.getState());
       const defaultValues = metadata.getDefaultValues();
@@ -209,7 +194,7 @@ export class EzForm {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": ""
+        "text": "Reposit\u00F3rio de dados, controla a manipula\u00E7\u00E3o dos dados"
       }
     },
     "config": {
@@ -231,7 +216,26 @@ export class EzForm {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": ""
+        "text": "Configura\u00E7\u00E3o dos campos."
+      }
+    },
+    "recordsValidator": {
+      "type": "unknown",
+      "mutable": false,
+      "complexType": {
+        "original": "RecordValidator",
+        "resolved": "RecordValidator",
+        "references": {
+          "RecordValidator": {
+            "location": "local"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Validador respons\u00E1vel por checar a integridade das informa\u00E7\u00F5es do registro"
       }
     }
   }; }
@@ -298,6 +302,9 @@ export class EzForm {
           "Record": {
             "location": "import",
             "path": "@sankhyalabs/core"
+          },
+          "ValidationResult": {
+            "location": "local"
           }
         },
         "return": "Promise<void>"

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

@@ -1,5 +1,5 @@
 import { h } from "@stencil/core";
-export const buildTextInput = ({ name, label }) => {
+export const buildTextInput = ({ name, label, readOnly }) => {
   return (h("div", { class: "ez-col ez-col--sd-12 ez-col--tb-3 ez-padding-horizontal--small" },
-    h("ez-text-input", { label: label, "data-field-name": name, key: name })));
+    h("ez-text-input", { label: label, "data-field-name": name, key: name, enabled: !readOnly })));
 };