@sankhyalabs/ezui 5.10.8 → 5.11.0-dev.10

package/dist/esm/ez-date-time-input.entry.js

@@ -1,6 +1,6 @@
 import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-296b8458.js';
 import { DateUtils, TimeFormatter, ElementIDUtils } from '@sankhyalabs/core';
-import { C as CSSVarsUtils } from './CSSVarsUtils-00f67f32.js';
+import { C as CSSVarsUtils } from './CSSVarsUtils-a97cfa29.js';
 
 const ezDateTimeInputCss = ":host{display:block;width:100%;--ez-date-input__input--background-color:var(--background--medium, #e0e0e0);--ez-date-input__input--border-color:var(--ez-date-input__input--background-color);--ez-date-input__calendar-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" version=\"1.1\" height=\"16px\" width=\"15px\"><path d=\"M 3.171875,5.25 C 2.6485088,5.25 2.21875,5.6797588 2.21875,6.203125 2.21875,6.7264912 2.6485088,7.15625 3.171875,7.15625 3.6952412,7.15625 4.125,6.7264912 4.125,6.203125 4.125,5.6797588 3.6952412,5.25 3.171875,5.25 Z m 2.875,0 C 5.5235088,5.25 5.09375,5.6797588 5.09375,6.203125 5.09375,6.7264912 5.5235088,7.15625 6.046875,7.15625 6.5702412,7.15625 7,6.7264912 7,6.203125 7,5.6797588 6.5702412,5.25 6.046875,5.25 Z m 2.875,0 c -0.5233662,0 -0.953125,0.4297588 -0.953125,0.953125 0,0.5233662 0.4297588,0.953125 0.953125,0.953125 0.5233662,0 0.9511719,-0.4297588 0.9511719,-0.953125 C 9.8730469,5.6797588 9.4452412,5.25 8.921875,5.25 Z m 2.873047,0 c -0.523366,0 -0.953125,0.4297588 -0.953125,0.953125 0,0.5233662 0.429759,0.953125 0.953125,0.953125 0.523366,0 0.953125,-0.4297588 0.953125,-0.953125 C 12.748047,5.6797588 12.318288,5.25 11.794922,5.25 Z M 3.171875,8.1230469 c -0.5233662,0 -0.953125,0.4297588 -0.953125,0.953125 0,0.5233662 0.4297588,0.9531251 0.953125,0.9531251 0.5233662,0 0.953125,-0.4297589 0.953125,-0.9531251 0,-0.5233662 -0.4297588,-0.953125 -0.953125,-0.953125 z m 2.875,0 c -0.5233662,0 -0.953125,0.4297588 -0.953125,0.953125 0,0.5233662 0.4297588,0.9531251 0.953125,0.9531251 C 6.5702412,10.029297 7,9.5995381 7,9.0761719 7,8.5528057 6.5702412,8.1230469 6.046875,8.1230469 Z m 2.8554688,0 c -0.5233663,0 -0.953125,0.4297588 -0.953125,0.953125 0,0.5233662 0.4297587,0.9531251 0.953125,0.9531251 0.5233661,0 0.9531249,-0.4297589 0.953125,-0.9531251 0,-0.5233662 -0.4297588,-0.953125 -0.953125,-0.953125 z m 2.9003902,0 c -0.523366,0 -0.953125,0.4297588 -0.953125,0.953125 0,0.5233662 0.429759,0.9531251 0.953125,0.9531251 0.523367,0 0.953125,-0.4297589 0.953125,-0.9531251 0,-0.5233662 -0.429758,-0.953125 -0.953125,-0.953125 z M 3.171875,10.998047 c -0.5233662,0 -0.953125,0.429759 -0.953125,0.953125 0,0.523366 0.4297588,0.953125 0.953125,0.953125 0.5233662,0 0.953125,-0.429759 0.953125,-0.953125 0,-0.523366 -0.4297588,-0.953125 -0.953125,-0.953125 z m 2.875,0 c -0.5233662,0 -0.953125,0.429759 -0.953125,0.953125 0,0.523366 0.4297588,0.953125 0.953125,0.953125 C 6.5702412,12.904297 7,12.474538 7,11.951172 7,11.427806 6.5702412,10.998047 6.046875,10.998047 Z m 2.8554688,0 c -0.5233663,0 -0.953125,0.429759 -0.953125,0.953125 0,0.523366 0.4297587,0.953125 0.953125,0.953125 0.5233661,0 0.9531249,-0.429759 0.953125,-0.953125 0,-0.523366 -0.4297588,-0.953125 -0.953125,-0.953125 z m 2.9003902,0 c -0.523366,0 -0.953125,0.429759 -0.953125,0.953125 0,0.523366 0.429759,0.953125 0.953125,0.953125 0.523367,0 0.953125,-0.429759 0.953125,-0.953125 0,-0.523366 -0.429758,-0.953125 -0.953125,-0.953125 z M 3.5,0 c -0.554,0 -1,0.446 -1,1 v 0.050781 C 1.0853217,1.2909766 0,2.5186658 0,4 v 9 c 0,1.652487 1.3475134,3 3,3 h 9 c 1.652487,0 3,-1.347513 3,-3 V 4 C 15,2.5186658 13.914678,1.2909766 12.5,1.0507812 V 1 c 0,-0.554 -0.446,-1 -1,-1 -0.554,0 -1,0.446 -1,1 h -2 c 0,-0.554 -0.446,-1 -1,-1 -0.554,0 -1,0.446 -1,1 h -2 C 4.5,0.446 4.054,0 3.5,0 Z m 1,2.0996094 h 2 v 0.640625 c 0,0.554 0.446,1 1,1 0.554,0 1,-0.446 1,-1 v -0.640625 h 2 v 0.640625 c 0,0.554 0.446,1 1,1 0.554,0 1,-0.446 1,-1 V 2.1738281 C 13.311725,2.3905225 13.900391,3.11278 13.900391,4 v 9 c 0,1.062113 -0.838278,1.900391 -1.900391,1.900391 H 3 C 1.9378864,14.900391 1.0996094,14.062113 1.0996094,13 V 4 C 1.0996094,3.11278 1.6882747,2.3905225 2.5,2.1738281 v 0.5664063 c 0,0.554 0.446,1 1,1 0.554,0 1,-0.446 1,-1 z\"/></svg>')}.btn-open-cal{outline:none;border:none;background-color:unset;cursor:pointer}.btn-open-cal:disabled{cursor:unset}.btn-open-cal::after{content:'';display:flex;background-color:var(--text--primary, #008561);width:15px;height:16px;-webkit-mask-image:var(--ez-date-input__calendar-image);mask-image:var(--ez-date-input__calendar-image)}.btn-open-cal:disabled:after{background-color:var(--text--disable, #AFB6C0)}.btn-open-cal:enabled:hover::after{background-color:var(--color--primary, #4e4e4e)}ez-text-input{--text-input__input--background-color:var(--ez-date-input__input--background-color, #FFFFFF);--text-input__input--border-color:var(--ez-date-input__input--border-color, #DCE0E8)}";
 
@@ -10,7 +10,9 @@ const EzDateTimeInput = class {
     this.ezChange = createEvent(this, "ezChange", 7);
     this.ezStartChange = createEvent(this, "ezStartChange", 7);
     this.ezCancelWaitingChange = createEvent(this, "ezCancelWaitingChange", 7);
+    this._changePending = false;
     this._focused = false;
+    this._valuePromiseCallbacks = [];
     this.label = undefined;
     this.value = undefined;
     this.enabled = true;
@@ -49,6 +51,7 @@ const EzDateTimeInput = class {
         this.ezChange.emit(valueEmitted);
       }
     }
+    this._changePending = false;
   }
   /**
    * Aplica o foco no campo.
@@ -68,6 +71,18 @@ const EzDateTimeInput = class {
   async isInvalid() {
     return typeof this.errorMessage === "string" && this.errorMessage.trim() !== "";
   }
+  /*
+   * Retorna uma promise com o valor da opção selecionada,
+   * que será resolvida quando o backend devolver este dado.
+   */
+  async getValueAsync() {
+    if (this._changePending) {
+      return new Promise(accept => {
+        this._valuePromiseCallbacks.push(accept);
+      });
+    }
+    return Promise.resolve(this.value);
+  }
   handleKeyDown(event) {
     const input = this._textInput.shadowRoot.querySelector('input');
     if (event.shiftKey && event.key === "Tab") {
@@ -112,7 +127,14 @@ const EzDateTimeInput = class {
     }
   }
   showCalendar() {
-    const top = this.errorMessage || this.mode === "slim" ? 6 : -13;
+    let top;
+    if (this.isFixed()) {
+      top = 29;
+      this._calendar.fitHorizontal(0);
+    }
+    else {
+      top = this.errorMessage || this.mode === "slim" ? 6 : -13;
+    }
     this._calendar.fitVertical(top, this._elem.clientHeight);
     this._calendar.style.visibility = 'inherit';
   }
@@ -137,27 +159,35 @@ const EzDateTimeInput = class {
   }
   handleBlur() {
     var _a, _b;
-    const strValue = ((_b = (_a = this._textInput) === null || _a === void 0 ? void 0 : _a.value) === null || _b === void 0 ? void 0 : _b.trim()) || "";
-    const newValue = this.getParsedDateTime();
-    if (newValue || !strValue) {
-      this.errorMessage = "";
-      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) || '';
-          this._focused = false;
+    try {
+      const strValue = ((_b = (_a = this._textInput) === null || _a === void 0 ? void 0 : _a.value) === null || _b === void 0 ? void 0 : _b.trim()) || "";
+      const newValue = this.getParsedDateTime();
+      if (newValue || !strValue) {
+        this.errorMessage = "";
+        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) || '';
+            this._focused = false;
+          }
+          this.ezCancelWaitingChange.emit();
+        }
+        else {
+          this.changeValue(newValueValidated);
         }
-        this.ezCancelWaitingChange.emit();
       }
       else {
-        this.changeValue(newValueValidated);
+        this.changeValue(undefined);
+        this.ezCancelWaitingChange.emit();
+        this.errorMessage = "O valor digitado não é uma data válida";
       }
     }
-    else {
-      this.changeValue(undefined);
-      this.ezCancelWaitingChange.emit();
-      this.errorMessage = "O valor digitado não é uma data válida";
+    finally {
+      for (const callback of this._valuePromiseCallbacks) {
+        callback(this.value);
+      }
+      this._valuePromiseCallbacks = [];
     }
   }
   getTextValue(date) {
@@ -171,6 +201,7 @@ const EzDateTimeInput = class {
     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._changePending = true;
       this._focused = true;
       this.ezStartChange.emit({ waitmessage: "", blocking: false });
     }
@@ -184,13 +215,16 @@ const EzDateTimeInput = class {
       this._textInput.value = textValue;
     }
   }
+  isFixed() {
+    return this._elem.dataset.isFixed === "true";
+  }
   componentDidLoad() {
     CSSVarsUtils.applyVarsTextInput(this._elem, this._textInput);
     this.setInputValue();
   }
   render() {
     ElementIDUtils.addIDInfoIfNotExists(this._elem, 'input');
-    return (h(Host, null, h("ez-text-input", { "data-element-id": ElementIDUtils.getInternalIDInfo("textInput"), 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(), canShowError: this.canShowError }, h("button", { disabled: !this.enabled, tabindex: -1, class: "btn-open-cal", onClick: () => this.showCalendar(), slot: "leftIcon" })), h("ez-calendar", { "data-element-id": ElementIDUtils.getInternalIDInfo("calendar"), onEzChange: (event) => { this.hideCalendar(); event.stopPropagation(); }, floating: true, ref: elem => this._calendar = elem, time: true, showSeconds: this.showSeconds })));
+    return (h(Host, null, h("ez-text-input", { "data-element-id": ElementIDUtils.getInternalIDInfo("textInput"), 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(), canShowError: this.canShowError }, h("button", { disabled: !this.enabled, tabindex: -1, class: "btn-open-cal", onClick: () => this.showCalendar(), slot: "leftIcon" })), h("ez-calendar", { ref: elem => this._calendar = elem, "data-element-id": ElementIDUtils.getInternalIDInfo("calendar"), onEzChange: (event) => { this.hideCalendar(); event.stopPropagation(); }, floating: true, time: true, showSeconds: this.showSeconds, "data-is-fixed": this._elem.dataset.isFixed })));
   }
   get _elem() { return getElement(this); }
   static get watchers() { return {

package/dist/esm/ez-filter-input_2.entry.js

@@ -1,6 +1,6 @@
 import { r as registerInstance, c as createEvent, h, g as getElement } from './index-296b8458.js';
 import { ElementIDUtils } from '@sankhyalabs/core';
-import { C as CSSVarsUtils } from './CSSVarsUtils-00f67f32.js';
+import { C as CSSVarsUtils } from './CSSVarsUtils-a97cfa29.js';
 
 const ezFilterInputCss = ":host{display:block;width:100%}";
 

package/dist/esm/ez-form-view.entry.js

@@ -95,15 +95,54 @@ uiBuilders.set(UserInterface.LONGTEXT, buildTextArea);
 const fieldBuilder = (field) => {
   const builder = uiBuilders.get(field.userInterface) || buildTextInput;
   const label = field.required ? `${field.label}${REQUIRED_INFO}` : field.label;
-  return builder(Object.assign(Object.assign({}, field), { label }));
+  const builtElement = builder(Object.assign(Object.assign({}, field), { label }));
+  //@ts-ignore
+  builtElement.$attrs$['data-form-item'] = field.name;
+  return builtElement;
 };
 
+class FormItem {
+  constructor(elem) {
+    this.elem = elem;
+  }
+  addRightElement(el) {
+    this.removeRightElement();
+    el.classList.add('ez-padding-left--small');
+    el.setAttribute('data-custom-item', 'true');
+    this.elem.classList.add('ez-col--nowrap');
+    this.elem.appendChild(el);
+  }
+  removeRightElement() {
+    Array.from(this.elem.querySelectorAll('[data-custom-item="true"]')).forEach(item => item.remove());
+  }
+  get fieldName() {
+    return this.elem.getAttribute('data-form-item');
+  }
+}
+class FormItems {
+  constructor(items, formId) {
+    this.items = new Map();
+    this.formId = formId;
+    items.forEach(item => {
+      const formItem = new FormItem(item);
+      this.items.set(formItem.fieldName, formItem);
+    });
+  }
+  getItem(name) {
+    return this.items.get(name);
+  }
+  get formName() {
+    return this.formId;
+  }
+}
+
 const ezFormViewCss = ".sc-ez-form-view-h{display:flex;flex-direction:row;flex-wrap:wrap;width:100%}";
 
 const EzFormView = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
     this.ezContentReady = createEvent(this, "ezContentReady", 7);
+    this.formItemsReady = createEvent(this, "formItemsReady", 7);
     this.fields = undefined;
   }
   async showUp() {
@@ -129,6 +168,8 @@ const EzFormView = class {
   }
   componentDidRender() {
     this.ezContentReady.emit(Array.from(this._element.querySelectorAll("[data-field-name]")));
+    const formItems = new FormItems(Array.from(this._element.querySelectorAll("[data-form-item]")));
+    this.formItemsReady.emit(formItems);
   }
   render() {
     ElementIDUtils.addIDInfoIfNotExists(this._element, 'ezFormView');

package/dist/esm/ez-form.entry.js

@@ -1,6 +1,7 @@
 import { r as registerInstance, c as createEvent, h, f as forceUpdate, H as Host, g as getElement } from './index-296b8458.js';
-import { UserInterface, DateUtils, Action, WaitingChangeException, ApplicationContext, DataUnitAction, StringUtils, DataUnit, ElementIDUtils } from '@sankhyalabs/core';
-import { A as ApplicationUtils } from './ApplicationUtils-d9a34a16.js';
+import { DateUtils, Action, WaitingChangeException, ApplicationContext, DataUnitAction, StringUtils, DataUnit, ElementIDUtils } from '@sankhyalabs/core';
+import { b as buildFieldMetadata, R as RecordValidationProcessor } from './RecordValidationProcessor-abc814af.js';
+import './ApplicationUtils-d9a34a16.js';
 import './DialogType-54a62731.js';
 
 const DETAIL_PATTERN = /child\[([^\]]+)\]/;
@@ -104,7 +105,7 @@ const buildFormMetadata = (config, dataUnit, includeDetails = false) => {
         if (!sheets.has(tabConfig)) {
           sheets.set(tabConfig, []);
         }
-        const formField = buildFormField(descriptor, field);
+        const formField = buildFieldMetadata(descriptor, field);
         sheets.get(tabConfig).push(formField);
         if (formField.required) {
           requiredFields.push(field.name);
@@ -163,26 +164,6 @@ const buildFormMetadata = (config, dataUnit, includeDetails = false) => {
   metadata.addDefaultValues(defaultValues);
   return metadata;
 };
-const buildFormField = (descriptor, config) => {
-  let { name, label, group } = Object.assign({}, config);
-  let { readOnly, required } = Object.assign({}, config);
-  let props;
-  let userInterface;
-  if (descriptor) {
-    label = label || descriptor.label;
-    name = name || descriptor.name;
-    required = descriptor.required || (config === null || config === void 0 ? void 0 : config.required);
-    readOnly = descriptor.readOnly || (config === null || config === void 0 ? void 0 : config.readOnly);
-    props = descriptor.properties;
-    userInterface = descriptor.userInterface;
-  }
-  return {
-    name, label, group,
-    readOnly, required,
-    props,
-    userInterface: userInterface || UserInterface.SHORTTEXT
-  };
-};
 const getTabConfig = (tab, sheets) => {
   const tabConfig = (typeof tab === "string" ? Array.from(sheets.keys()).find(t => t.label === tab) : tab);
   return tabConfig || { label: tab, visible: true };
@@ -253,7 +234,11 @@ class DataBinder {
       }
     });
     this._formMetadata = formMetadata;
-    this._recordsValidator = recordsValidator;
+    this._recordValidatorProcessor = new RecordValidationProcessor(this._dataUnit, {
+      getRequiredFields: () => this._formMetadata.getRequiredFields(),
+      markAsInvalid: field => this.markInvalid(field),
+      getMessageForField: field => this.getErrorMessage(field)
+    }, recordsValidator);
   }
   onDisconnectedCallback() {
     this._dataUnit.unsubscribe(this.onDataUnitEvent);
@@ -264,7 +249,6 @@ class DataBinder {
     return record === null || record === void 0 ? void 0 : record.__record__id__;
   }
   markInvalid(field) {
-    this._dataUnit.setInvalidField(field.name, field.message, this.getCurrentRecordId());
     if (this._fields.has(field.name)) {
       const fieldElement = this._fields.get(field.name).field;
       this.updateErrorMessage(field.name, fieldElement, field.message);
@@ -293,65 +277,7 @@ class DataBinder {
     }
   }
   validate() {
-    return new Promise((accept, reject) => {
-      var _a;
-      const records = this._dataUnit.getModifiedRecords();
-      for (let i = 0; i < records.length; i++) {
-        const record = records[i];
-        const invalidResults = [];
-        let validationResult = this.validateRequired(record);
-        if (validationResult && !validationResult.isValid) {
-          invalidResults.push(validationResult);
-        }
-        validationResult = (_a = this._recordsValidator) === null || _a === void 0 ? void 0 : _a.validateRecord(record);
-        if (validationResult && !validationResult.isValid) {
-          invalidResults.push(validationResult);
-        }
-        if (invalidResults.length > 0) {
-          this.processValidationResult(invalidResults);
-          reject();
-          break;
-        }
-      }
-      return accept();
-    });
-  }
-  validateRequired(record) {
-    const requiredFields = this._formMetadata.getRequiredFields();
-    const invalidFields = [];
-    new Set(requiredFields).forEach(field => {
-      const value = record[field];
-      if (value == undefined || value === "") {
-        const errorMessage = this.getErrorMessage(field);
-        if (errorMessage) {
-          invalidFields.push({ name: field, message: errorMessage });
-        }
-        else {
-          invalidFields.push({ name: field, message: "Essa informação é obrigatória" });
-        }
-      }
-    });
-    if (invalidFields.length > 0) {
-      return { isValid: false, invalidFields, infoMessage: "Há pelo menos um campo obrigatório não preenchido." };
-    }
-    return undefined;
-  }
-  processValidationResult(validationResult) {
-    validationResult.forEach(invalidResult => {
-      const invalidFields = invalidResult.invalidFields;
-      if (invalidFields) {
-        invalidFields.forEach(field => {
-          this.markInvalid(field);
-        });
-      }
-      if (invalidResult.infoMessage) {
-        ApplicationUtils.info(invalidResult.infoMessage);
-      }
-      if (invalidResult.errorMessage) {
-        const { errorTitle, errorMessage } = invalidResult;
-        ApplicationUtils.error(errorTitle, errorMessage);
-      }
-    });
+    return this._recordValidatorProcessor.validate();
   }
   updateErrorMessage(fieldName, field, message) {
     if (message == undefined) {
@@ -416,7 +342,7 @@ class DataBinder {
       this._dataUnit.addRecord();
     }
     this._dataUnit.clearInvalid(this.getCurrentRecordId(), fieldName);
-    this._dataUnit.setFieldValue(fieldName, newValue);
+    this._dataUnit.setFieldValue(fieldName, newValue, [this.getCurrentRecordId()]);
     if (this._dataUnit.waitingForChange(fieldName)) {
       const bind = this._fields.get(fieldName);
       if (bind) {
@@ -905,6 +831,7 @@ const EzForm = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
     this.ezReady = createEvent(this, "ezReady", 7);
+    this.formItemsReady = createEvent(this, "formItemsReady", 7);
     this.onDataUnitAction = (action) => {
       if (action.type === Action.METADATA_LOADED) {
         this.processMetadata();