@sankhyalabs/ezui 5.20.4 → 5.21.0-dev.10

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

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-1064511f.js');
+const index = require('./index-a7b0c73d.js');
 const core = require('@sankhyalabs/core');
 const constants = require('./constants-2714478b.js');
 const CheckMode = require('./CheckMode-ecb90b87.js');
@@ -14,7 +14,7 @@ const buildCheckBox = (field) => {
   return buildField(field.name, field.label, field.readOnly, field.contextName, false);
 };
 function buildField(fieldName, fieldLabel, readOnly, contextName, switchMode) {
-  return (index.h("div", { class: "ez-col ez-col--sd-12 ez-col--tb-3 ez-align--middle ez-padding-horizontal--small ez-padding-bottom--large" },
+  return (index.h("div", { class: "ez-col ez-col--sd-12 ez-align--middle ez-padding-horizontal--small ez-padding-bottom--large" },
     index.h("ez-check", { enabled: !readOnly, label: fieldLabel, mode: switchMode ? CheckMode.CheckMode.SWITCH : CheckMode.CheckMode.REGULAR, "data-field-name": fieldName, "data-context-name": contextName, key: fieldName })));
 }
 
@@ -28,29 +28,31 @@ const buildComboBox = ({ name, label, readOnly, required, props, contextName, ca
   else {
     options = prop;
   }
-  return (index.h("div", { class: "ez-col ez-col--sd-12 ez-col--tb-3 ez-padding-horizontal--small" },
+  return (index.h("div", { class: "ez-col ez-col--sd-12 ez-padding-horizontal--small" },
     index.h("ez-combo-box", { enabled: !readOnly, suppressEmptyOption: required, label: label, "data-field-name": name, "data-context-name": contextName, key: name, options: options, canShowError: canShowError })));
 };
 
 const buildDate = ({ name, label, readOnly, canShowError }) => {
-  return (index.h("div", { class: "ez-col ez-col--sd-12 ez-col--tb-3 ez-padding-horizontal--small" },
+  return (index.h("div", { class: "ez-col ez-col--sd-12 ez-padding-horizontal--small" },
     index.h("ez-date-input", { enabled: !readOnly, label: label, "data-field-name": name, key: name, canShowError: canShowError })));
 };
 const buildTime = ({ name, label, readOnly, canShowError }) => {
-  return (index.h("div", { class: "ez-col ez-col--sd-12 ez-col--tb-3 ez-padding-horizontal--small" },
+  return (index.h("div", { class: "ez-col ez-col--sd-12 ez-padding-horizontal--small" },
     index.h("ez-time-input", { enabled: !readOnly, label: label, "data-field-name": name, key: name, canShowError: canShowError })));
 };
 const buildDateTime = ({ name, label, readOnly, contextName, canShowError }) => {
-  return (index.h("div", { class: "ez-col ez-col--sd-12 ez-col--tb-3 ez-padding-horizontal--small" },
+  return (index.h("div", { class: "ez-col ez-col--sd-12 ez-padding-horizontal--small" },
     index.h("ez-date-time-input", { enabled: !readOnly, label: label, "data-field-name": name, "data-context-name": contextName, key: name, canShowError: canShowError })));
 };
 
 const buildFile = ({ name, label, readOnly, contextName, props }) => {
   const uploadProps = core.ObjectUtils.removeEmptyValues({
     subTitle: props.subTitle,
-    requestHeaders: props.STORAGESTRATEGY ? {
+    requestHeaders: Object.assign(Object.assign({}, (props.STORAGESTRATEGY && {
       STORAGESTRATEGY: props.STORAGESTRATEGY
-    } : null
+    })), (props.INTERNAL_FILENAME && {
+      INTERNAL_FILENAME: props.INTERNAL_FILENAME
+    })),
   });
   return (index.h("div", { class: "ez-col ez-col--sd-12 ez-padding-horizontal--small" },
     index.h("ez-upload", Object.assign({ enabled: !readOnly, label: label, "data-field-name": name, "data-context-name": contextName, key: name }, uploadProps))));
@@ -65,12 +67,12 @@ const buildInteger = ({ name, label, readOnly, contextName, canShowError }) => {
   return buildNumeric(name, label, readOnly, 0, 0, contextName, canShowError);
 };
 function buildNumeric(fieldName, fieldLabel, readOnly, precision, prettyPrecision, contextName, canShowError) {
-  return (index.h("div", { class: "ez-col ez-col--sd-12 ez-col--tb-3 ez-padding-horizontal--small" },
+  return (index.h("div", { class: "ez-col ez-col--sd-12 ez-padding-horizontal--small" },
     index.h("ez-number-input", { enabled: !readOnly, label: fieldLabel, precision: precision, prettyPrecision: prettyPrecision, "data-field-name": fieldName, "data-context-name": contextName, key: fieldName, canShowError: canShowError })));
 }
 
 const buildSearch = ({ name, label, readOnly, required, contextName, canShowError, optionLoader }) => {
-  return (index.h("div", { class: "ez-col ez-col--sd-12 ez-col--tb-3 ez-padding-horizontal--small" },
+  return (index.h("div", { class: "ez-col ez-col--sd-12 ez-padding-horizontal--small" },
     index.h("ez-search", { enabled: !readOnly, suppressEmptyOption: required, label: label, "data-field-name": name, "data-context-name": contextName, key: name, canShowError: canShowError, optionLoader: optionLoader })));
 };
 
@@ -80,7 +82,7 @@ const buildTextArea = ({ name, label, readOnly, contextName, rows, canShowError
 };
 
 const buildTextInput = ({ name, label, readOnly, contextName, canShowError }) => {
-  return (index.h("div", { class: "ez-col ez-col--sd-12 ez-col--tb-3 ez-padding-horizontal--small" },
+  return (index.h("div", { class: "ez-col ez-col--sd-12 ez-padding-horizontal--small" },
     index.h("ez-text-input", { label: label, "data-field-name": name, "data-context-name": contextName, key: name, enabled: !readOnly, canShowError: canShowError })));
 };
 
@@ -140,7 +142,7 @@ class FormItems {
   }
 }
 
-const ezFormViewCss = ".sc-ez-form-view-h{display:flex;flex-direction:row;flex-wrap:wrap;width:100%}";
+const ezFormViewCss = ".sc-ez-form-view-h{display:flex;flex-wrap:wrap;width:100%;--ez-form-view__item--min-width:220px;--ez-form-view__item--sapce-width:5px}.form-view__content.sc-ez-form-view{display:grid;grid-template-columns:repeat(auto-fill, minmax(var(--ez-form-view__item--min-width), 1fr));gap:var(--ez-form-view__item--sapce-width);width:100%}.input-full_width.sc-ez-form-view{grid-column:1 / -1;width:100%}";
 
 const EzFormView = class {
   constructor(hostRef) {
@@ -152,6 +154,19 @@ const EzFormView = class {
   async showUp() {
     this._element.scrollIntoView({ behavior: "smooth", block: "start" });
   }
+  /**
+   * Altera/adiciona uma propriedade nos metados do campo.
+   */
+  async setFieldProp(fieldName, propName, value) {
+    const fields = this.fields.map(field => {
+      if (field.name === fieldName) {
+        field.props = field.props || {};
+        field.props[propName] = value;
+      }
+      return field;
+    });
+    this.fields = [...fields];
+  }
   groupFields(fields) {
     const result = new Map();
     fields.forEach(item => {
@@ -175,19 +190,36 @@ const EzFormView = class {
     const formItems = new FormItems(Array.from(this._element.querySelectorAll("[data-form-item]")));
     this.formItemsReady.emit(formItems);
   }
+  isItemFullWidth(userInterface) {
+    return [
+      core.UserInterface.FILE,
+      core.UserInterface.LONGTEXT
+    ].includes(userInterface);
+  }
+  buildFormItemElement(item, classItem = "") {
+    if (this.isItemFullWidth(item.userInterface)) {
+      classItem += " input-full_width";
+    }
+    return index.h("div", { class: classItem }, fieldBuilder(item));
+  }
   render() {
     core.ElementIDUtils.addIDInfoIfNotExists(this._element, 'ezFormView');
     if (this.fields == undefined) {
       return;
     }
-    return (index.h(index.Host, null, Array.from(this.groupFields(this.fields).entries()).map(([label, value]) => {
+    let nonArrayGrup = [];
+    let formContent = Array.from(this.groupFields(this.fields).entries()).map(([label, value]) => {
       if (Array.isArray(value)) {
-        return (index.h("ez-collapsible-box", { id: `group-${label}`, label: label, "header-size": "large", key: label }, value.map(fi => fieldBuilder(fi))));
+        return (index.h("ez-collapsible-box", { id: `group-${label}`, label: label, "header-size": "large", key: label }, index.h("div", { class: "form-view__content" }, value.map(fi => (this.buildFormItemElement(fi))))));
       }
       else {
-        return fieldBuilder(value);
+        nonArrayGrup.push(value);
       }
-    })));
+    });
+    // Filtra os elementos que não são arrays e os coloca dentro de uma única div
+    let nonArrayElements = nonArrayGrup.map((value) => this.buildFormItemElement(value));
+    let groupedNonArrayElements = index.h("div", { class: "form-view__content" }, nonArrayElements);
+    return (index.h(index.Host, null, groupedNonArrayElements, formContent));
   }
   get _element() { return index.getElement(this); }
 };

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

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-1064511f.js');
+const index = require('./index-a7b0c73d.js');
 const core = require('@sankhyalabs/core');
 const RecordValidationProcessor = require('./RecordValidationProcessor-4c893e04.js');
 require('./ApplicationUtils-c9d1205c.js');
@@ -854,10 +854,12 @@ const EzForm = class {
         this.processMetadata();
       }
     };
+    this._fieldsProps = new Map();
     this.dataUnit = undefined;
     this.config = undefined;
     this.recordsValidator = undefined;
     this.fieldToFocus = undefined;
+    this.onlyStaticFields = false;
   }
   /**
    * Realiza validação no conteúdo de todos os campos.
@@ -868,6 +870,15 @@ const EzForm = class {
   observeConfig() {
     this.processMetadata();
   }
+  /**
+   * Altera/adiciona uma propriedade nos metadados do campo.
+   */
+  async setFieldProp(fieldName, propName, value) {
+    const newCustomFieldProps = new Map(this._fieldsProps);
+    const currentProps = this._fieldsProps.get(fieldName);
+    newCustomFieldProps.set(fieldName, Object.assign(Object.assign({}, currentProps), { [propName]: value }));
+    this._fieldsProps = newCustomFieldProps;
+  }
   getDynamicContent() {
     var _a;
     const formMD = selectFormMetadata(this._store.getState());
@@ -894,10 +905,10 @@ const EzForm = class {
     }
     this.ezFormSetFields.emit(fields);
     const idFormSheet = `${core.StringUtils.replaceAccentuatedChars(core.StringUtils.toCamelCase(currentSheet === null || currentSheet === void 0 ? void 0 : currentSheet.label), false)}_selectorContainer`;
-    return (index.h("div", { class: "dynamic-content", "data-element-id": idFormSheet }, index.h("ez-form-view", { class: "ez-row ez-padding-vertical--small", fields: fields })));
+    return (index.h("div", { class: "dynamic-content", "data-element-id": idFormSheet }, index.h("ez-form-view", { ref: ref => this._formView = ref, class: "ez-row ez-padding-vertical--small", fields: fields })));
   }
   processMetadata() {
-    if (!this.isStatic() && this.dataUnit && this._store) {
+    if (this.bindFields() && this.dataUnit && this._store) {
       const metadata = buildFormMetadata(this.config, this.dataUnit);
       this._store.dispatch(loadMetadata(metadata));
     }
@@ -906,6 +917,9 @@ const EzForm = class {
     var _a;
     return ((_a = this._staticFields) === null || _a === void 0 ? void 0 : _a.length) > 0;
   }
+  bindFields() {
+    return !this.isStatic() || this.onlyStaticFields === false;
+  }
   componentWillLoad() {
     if (this.dataUnit === undefined) {
       this.dataUnit = new core.DataUnit("ez-form");
@@ -925,6 +939,7 @@ const EzForm = class {
     this._dataBinder.bind(Array.from(this._element.querySelectorAll("[data-field-name]")), this.dataUnit.dataUnitId, metadata, this.recordsValidator);
     this.ezReady.emit();
     this.handleFieldToFocus();
+    this.setFieldsProps();
   }
   handleFieldToFocus() {
     var _a;
@@ -941,6 +956,17 @@ const EzForm = class {
       this.ezFormRequestClearFieldToFocus.emit();
     });
   }
+  setFieldsProps() {
+    if (!this._formView) {
+      return;
+    }
+    for (const [fieldName, props] of this._fieldsProps) {
+      for (const prop in props) {
+        this._formView.setFieldProp(fieldName, prop, props[prop]);
+      }
+      this._fieldsProps.delete(fieldName);
+    }
+  }
   disconnectedCallback() {
     this.dataUnit.unsubscribe(this.onDataUnitAction);
     this._dataBinder.onDisconnectedCallback();