@sankhyalabs/ezui 5.22.0-dev.11 → 5.22.0-dev.110

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

@@ -1,6 +1,6 @@
 import { h, r as registerInstance, c as createEvent, g as getElement, H as Host } from './index-baa5e267.js';
-import { ObjectUtils, UserInterface, ElementIDUtils } from '@sankhyalabs/core';
-import { R as REQUIRED_INFO } from './constants-4e0d35b7.js';
+import { ObjectUtils, StringUtils, UserInterface, ElementIDUtils } from '@sankhyalabs/core';
+import { R as REQUIRED_INFO } from './constants-b036528f.js';
 import { C as CheckMode } from './CheckMode-bdb2ec19.js';
 
 const buildSwitch = (field) => {
@@ -10,7 +10,7 @@ const buildCheckBox = (field) => {
   return buildField(field.name, field.label, field.readOnly, field.contextName, false);
 };
 function buildField(fieldName, fieldLabel, readOnly, contextName, switchMode) {
-  return (h("div", { class: "ez-col ez-col--sd-12 ez-align--middle ez-padding-horizontal--small ez-padding-bottom--large" },
+  return (h("div", { class: "ez-col ez-col--sd-12 ez-align--middle ez-padding-bottom--large" },
     h("ez-check", { enabled: !readOnly, label: fieldLabel, mode: switchMode ? CheckMode.SWITCH : CheckMode.REGULAR, "data-field-name": fieldName, "data-context-name": contextName, key: fieldName })));
 }
 
@@ -24,21 +24,26 @@ const buildComboBox = ({ name, label, readOnly, required, props, contextName, ca
   else {
     options = prop;
   }
-  return (h("div", { class: "ez-col ez-col--sd-12 ez-padding-horizontal--small" },
-    h("ez-combo-box", { enabled: !readOnly, suppressEmptyOption: required, label: label, "data-field-name": name, "data-context-name": contextName, key: name, options: options, canShowError: canShowError })));
+  return (h("div", { class: "ez-col ez-col--sd-12" },
+    h("ez-combo-box", { class: "ez-input__no-margin", 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 (h("div", { class: "ez-col ez-col--sd-12 ez-padding-horizontal--small" },
-    h("ez-date-input", { enabled: !readOnly, label: label, "data-field-name": name, key: name, canShowError: canShowError })));
+  return (h("div", { class: "ez-col ez-col--sd-12" },
+    h("ez-date-input", { class: "ez-input__no-margin", enabled: !readOnly, label: label, "data-field-name": name, key: name, canShowError: canShowError })));
 };
-const buildTime = ({ name, label, readOnly, canShowError }) => {
-  return (h("div", { class: "ez-col ez-col--sd-12 ez-padding-horizontal--small" },
-    h("ez-time-input", { enabled: !readOnly, label: label, "data-field-name": name, key: name, canShowError: canShowError })));
+const buildTime = ({ name, label, readOnly, canShowError, props }) => {
+  var _a;
+  return (h("div", { class: "ez-col ez-col--sd-12" },
+    h("ez-time-input", { class: "ez-input__no-margin", enabled: !readOnly, label: label, "data-field-name": name, key: name, canShowError: canShowError, "show-seconds": (_a = props === null || props === void 0 ? void 0 : props.showSeconds) !== null && _a !== void 0 ? _a : false })));
+};
+const buildTimeSeconds = ({ name, label, readOnly, canShowError }) => {
+  return (h("div", { class: "ez-col ez-col--sd-12" },
+    h("ez-time-input", { class: "ez-input__no-margin", enabled: !readOnly, label: label, "data-field-name": name, key: name, canShowError: canShowError, showSeconds: true })));
 };
 const buildDateTime = ({ name, label, readOnly, contextName, canShowError }) => {
-  return (h("div", { class: "ez-col ez-col--sd-12 ez-padding-horizontal--small" },
-    h("ez-date-time-input", { enabled: !readOnly, label: label, "data-field-name": name, "data-context-name": contextName, key: name, canShowError: canShowError })));
+  return (h("div", { class: "ez-col ez-col--sd-12" },
+    h("ez-date-time-input", { class: "ez-input__no-margin", enabled: !readOnly, label: label, "data-field-name": name, "data-context-name": contextName, key: name, canShowError: canShowError })));
 };
 
 const buildFile = ({ name, label, readOnly, contextName, props }) => {
@@ -50,7 +55,7 @@ const buildFile = ({ name, label, readOnly, contextName, props }) => {
       INTERNAL_FILENAME: props.INTERNAL_FILENAME
     })),
   });
-  return (h("div", { class: "ez-col ez-col--sd-12 ez-padding-horizontal--small" },
+  return (h("div", { class: "ez-col ez-col--sd-12" },
     h("ez-upload", Object.assign({ enabled: !readOnly, label: label, "data-field-name": name, "data-context-name": contextName, key: name }, uploadProps))));
 };
 
@@ -64,24 +69,30 @@ 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 (h("div", { class: "ez-col ez-col--sd-12 ez-padding-horizontal--small" },
-    h("ez-number-input", { enabled: !readOnly, label: fieldLabel, precision: precision, prettyPrecision: prettyPrecision, "data-field-name": fieldName, "data-context-name": contextName, key: fieldName, canShowError: canShowError })));
+  return (h("div", { class: "ez-col ez-col--sd-12" },
+    h("ez-number-input", { class: "ez-input__no-margin", 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, props }) => {
-  var _a;
-  return (h("div", { class: "ez-col ez-col--sd-12 ez-padding-horizontal--small" },
-    h("ez-search", { enabled: !readOnly, suppressEmptyOption: required, label: label, "data-field-name": name, "data-context-name": contextName, key: name, canShowError: canShowError, optionLoader: optionLoader, ignoreLimitCharsToSearch: (_a = props.ignoreLimitCharsToSearch) !== null && _a !== void 0 ? _a : false })));
-};
-
 const buildTextArea = ({ name, label, readOnly, contextName, rows, canShowError }) => {
-  return (h("div", { class: "ez-col ez-col--sd-12 ez-padding-horizontal--small", key: name },
+  return (h("div", { class: "ez-col ez-col--sd-12", key: name },
     h("ez-text-area", { enabled: !readOnly, label: label, "data-field-name": name, "data-context-name": contextName, rows: rows, canShowError: canShowError })));
 };
 
-const buildTextInput = ({ name, label, readOnly, contextName, canShowError }) => {
-  return (h("div", { class: "ez-col ez-col--sd-12 ez-padding-horizontal--small" },
-    h("ez-text-input", { label: label, "data-field-name": name, "data-context-name": contextName, key: name, enabled: !readOnly, canShowError: canShowError })));
+const buildTextInput = ({ name, label, readOnly, contextName, canShowError, props }) => {
+  return (h("div", { class: "ez-col ez-col--sd-12" },
+    h("ez-text-input", { class: "ez-input__no-margin", label: label, "data-field-name": name, "data-context-name": contextName, key: name, enabled: !readOnly, canShowError: canShowError, mask: props === null || props === void 0 ? void 0 : props.mask, "clean-value-mask": props === null || props === void 0 ? void 0 : props.cleanValueMask })));
+};
+
+const buildSearchPlus = ({ name, label, readOnly, contextName, canShowError, optionLoader, props }) => {
+  const hasDescriptionField = !StringUtils.isEmpty(props === null || props === void 0 ? void 0 : props.DESCRIPTIONFIELD);
+  return (h("div", { class: "ez-col ez-col--sd-12" },
+    h("ez-search-plus", { class: "ez-input__no-margin", enabled: !readOnly, label: label, "data-field-name": name, "data-context-name": contextName, key: name, canShowError: canShowError, optionLoader: optionLoader, hideDescriptionInput: !hasDescriptionField })));
+};
+
+const buildSearch = ({ name, label, readOnly, required, contextName, canShowError, optionLoader, props }) => {
+  var _a;
+  return (h("div", { class: "ez-col ez-col--sd-12" },
+    h("ez-search", { class: "ez-input__no-margin", enabled: !readOnly, suppressEmptyOption: required, label: label, "data-field-name": name, "data-context-name": contextName, key: name, canShowError: canShowError, optionLoader: optionLoader, ignoreLimitCharsToSearch: (_a = props === null || props === void 0 ? void 0 : props.ignoreLimitCharsToSearch) !== null && _a !== void 0 ? _a : false })));
 };
 
 const uiBuilders = new Map();
@@ -90,11 +101,13 @@ uiBuilders.set(UserInterface.SWITCH, buildSwitch);
 uiBuilders.set(UserInterface.OPTIONSELECTOR, buildComboBox);
 uiBuilders.set(UserInterface.DATE, buildDate);
 uiBuilders.set(UserInterface.TIME, buildTime);
+uiBuilders.set(UserInterface.ELAPSEDTIME, buildTimeSeconds);
 uiBuilders.set(UserInterface.DATETIME, buildDateTime);
 uiBuilders.set(UserInterface.FILE, buildFile);
 uiBuilders.set(UserInterface.DECIMALNUMBER, buildDecimal);
 uiBuilders.set(UserInterface.INTEGERNUMBER, buildInteger);
 uiBuilders.set(UserInterface.SEARCH, buildSearch);
+uiBuilders.set(UserInterface.SEARCHPLUS, buildSearchPlus);
 uiBuilders.set(UserInterface.LONGTEXT, buildTextArea);
 const fieldBuilder = (field) => {
   const builder = uiBuilders.get(field.userInterface) || buildTextInput;
@@ -140,7 +153,7 @@ class FormItems {
   }
 }
 
-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 ezFormViewCss = ".sc-ez-form-view-h{display:flex;flex-wrap:wrap;width:100%;--ez-form-view__item--min-width:220px;--ez-form-view__item--max-width:440px;--ez-form-view__item--width:var(--space--small);--ez-form-view__item--padding:var(--space--small)}.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--width);padding-inline:var(--ez-form-view__item--padding);width:100%}.form-view__content--single-column.sc-ez-form-view{grid-template-columns:repeat(1, minmax(var(--ez-form-view__item--min-width), var(--ez-form-view__item--max-width)))}.input-full_width.sc-ez-form-view{grid-column:1 / -1;width:100%}";
 
 const EzFormView = class {
   constructor(hostRef) {
@@ -150,6 +163,7 @@ const EzFormView = class {
     this._customEditors = new Map();
     this.fields = undefined;
     this.selectedRecord = undefined;
+    this.singleColumn = true;
   }
   async showUp() {
     this._element.scrollIntoView({ behavior: "smooth", block: "start" });
@@ -225,7 +239,7 @@ const EzFormView = class {
     let nonArrayGrup = [];
     let formContent = Array.from(this.groupFields(this.fields).entries()).map(([label, value]) => {
       if (Array.isArray(value)) {
-        return (h("ez-collapsible-box", { id: `group-${label}`, label: label, "header-size": "large", key: label }, h("div", { class: "form-view__content" }, value.map(fi => (this.buildFormItemElement(fi))))));
+        return (h("ez-collapsible-box", { id: `group-${label}`, label: label, "header-size": "large", key: label }, h("div", { class: `form-view__content ${this.singleColumn && "form-view__content--single-column"}` }, value.map(fi => (this.buildFormItemElement(fi))))));
       }
       else {
         nonArrayGrup.push(value);
@@ -233,7 +247,7 @@ const EzFormView = class {
     });
     // 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 = h("div", { class: "form-view__content" }, nonArrayElements);
+    let groupedNonArrayElements = h("div", { class: `form-view__content ${this.singleColumn && "form-view__content--single-column"}` }, nonArrayElements);
     return (h(Host, null, groupedNonArrayElements, formContent));
   }
   get _element() { return getElement(this); }

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-baa5e267.js';
-import { DateUtils, Action, StringUtils, ApplicationContext, WaitingChangeException, DataUnitAction, DataUnit, ElementIDUtils } from '@sankhyalabs/core';
-import { b as buildFieldMetadata, R as RecordValidationProcessor } from './RecordValidationProcessor-b00b8b77.js';
+import { DateUtils, ApplicationContext, Action, StringUtils, DataUnit, ElementIDUtils } from '@sankhyalabs/core';
+import { b as buildFieldMetadata, D as DataBinder } from './DataBinder-89946126.js';
+import { F as FormLayout } from './FormLayout-54092963.js';
 import './ApplicationUtils-eaf91331.js';
 import './DialogType-54a62731.js';
 
@@ -101,7 +102,8 @@ const buildFormMetadata = (config, dataUnit, includeDetails = false) => {
         return;
       }
       const descriptor = dataUnit.getField(field.name);
-      if (descriptor && tabConfig.visible) {
+      const fieldVisible = (descriptor === null || descriptor === void 0 ? void 0 : descriptor.visible) == undefined || (descriptor === null || descriptor === void 0 ? void 0 : descriptor.visible) === true;
+      if (descriptor && fieldVisible && tabConfig.visible) {
         if (!sheets.has(tabConfig)) {
           sheets.set(tabConfig, []);
         }
@@ -179,327 +181,6 @@ const buildDetailSheet = (child) => {
   };
 };
 
-class DataBinder {
-  constructor(dataUnit) {
-    this.onDataUnitEvent = (action) => {
-      var _a, _b;
-      switch (action.type) {
-        case Action.DATA_LOADED:
-        case Action.DATA_SAVED:
-        case Action.RECORDS_REMOVED:
-        case Action.RECORDS_ADDED:
-        case Action.RECORDS_COPIED:
-        case Action.EDITION_CANCELED:
-        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:
-        case Action.RECORD_LOADED:
-          (_a = this._fields) === null || _a === void 0 ? void 0 : _a.forEach(field => {
-            this.updateValue(field.fieldName, field.field);
-          });
-          break;
-        case Action.FIELD_INVALIDATED:
-          (_b = this._fields) === null || _b === void 0 ? void 0 : _b.forEach(field => {
-            this.updateErrorMessage(field.fieldName, field.field);
-          });
-          break;
-      }
-    };
-    this._uuid = StringUtils.generateUUID();
-    this._fields = new Map();
-    this._dataUnit = dataUnit;
-    this.applyDefaultValues();
-    this._dataUnit.subscribe(this.onDataUnitEvent);
-    this._dataUnit.addInterceptor(this);
-    this.setContextDataBinder(dataUnit);
-  }
-  get dataBinderId() {
-    return this._uuid;
-  }
-  setContextDataBinder(dataUnit) {
-    const dataBindersByDataUnit = ApplicationContext.getContextValue("__DATABINDER_BY_DATAUNIT__") || new Map();
-    const dataBinders = [...(dataBindersByDataUnit.get(dataUnit.dataUnitId) || []), this];
-    dataBindersByDataUnit.set(dataUnit.dataUnitId, dataBinders);
-    ApplicationContext.setContextValue("__DATABINDER_BY_DATAUNIT__", dataBindersByDataUnit);
-  }
-  applyDefaultValues() {
-    const recordIds = (this._dataUnit.getAddedRecords() || []).map(r => r.__record__id__);
-    if (recordIds.length > 0) {
-      const defaultValues = this.getDefaultValues();
-      if (defaultValues) {
-        Object.keys(defaultValues).forEach(field => {
-          this._dataUnit.setFieldValue(field, defaultValues[field], recordIds);
-        });
-      }
-    }
-  }
-  bind(fields, currentContextName, formMetadata, recordsValidator) {
-    fields.forEach(fieldElement => {
-      const { fieldName, contextName } = fieldElement.dataset;
-      if (contextName == undefined || contextName === currentContextName) {
-        this.updateBind(fieldName, fieldElement);
-      }
-    });
-    this._formMetadata = formMetadata;
-    this._recordValidatorProcessor = new RecordValidationProcessor(this._dataUnit, {
-      getRequiredFields: () => this._formMetadata.getRequiredFields(),
-      markAsInvalid: field => this.markInvalid(field),
-      getMessageForField: field => this.getErrorMessage(field)
-    }, recordsValidator);
-  }
-  disconnectDataUnit() {
-    const dataBindersByDataUnit = ApplicationContext.getContextValue("__DATABINDER_BY_DATAUNIT__") || new Map();
-    const dataBinders = dataBindersByDataUnit.get(this._dataUnit.dataUnitId);
-    const dataBindersFiltered = dataBinders.filter((dataBinder) => dataBinder.dataBinderId !== this.dataBinderId);
-    dataBindersByDataUnit.set(this._dataUnit.dataUnitId, dataBindersFiltered);
-    ApplicationContext.setContextValue("__DATABINDER_BY_DATAUNIT__", dataBindersByDataUnit);
-  }
-  onDisconnectedCallback() {
-    this._dataUnit.unsubscribe(this.onDataUnitEvent);
-    this._dataUnit.removeInterceptor(this);
-    this.disconnectDataUnit();
-  }
-  getCurrentRecordId() {
-    const record = this._dataUnit.getSelectedRecord();
-    return record === null || record === void 0 ? void 0 : record.__record__id__;
-  }
-  markInvalid(field) {
-    if (this._fields.has(field.name)) {
-      const fieldElement = this._fields.get(field.name).field;
-      this.updateErrorMessage(field.name, fieldElement, field.message);
-    }
-  }
-  setFocus(fieldName) {
-    if (!this._fields.has(fieldName)) {
-      return;
-    }
-    const fieldElement = this._fields.get(fieldName).field;
-    if (typeof fieldElement["setFocus"] != "function") {
-      return;
-    }
-    fieldElement["setFocus"]();
-  }
-  clearInvalid(recordId) {
-    this._dataUnit.clearInvalid(recordId);
-    this._fields.forEach(fieldBinder => {
-      const fieldElement = fieldBinder.field;
-      fieldElement["errorMessage"] = "";
-    });
-  }
-  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;
-      }
-    }
-  }
-  validate() {
-    return this._recordValidatorProcessor.validate();
-  }
-  static async validateByDataunit(dataUnit) {
-    try {
-      const dataBindersByDataUnit = ApplicationContext.getContextValue("__DATABINDER_BY_DATAUNIT__");
-      const dataBinders = dataBindersByDataUnit.get(dataUnit.dataUnitId) || [];
-      await Promise.all(dataBinders.map((dataBinder) => dataBinder.validate()));
-      return true;
-    }
-    catch (_a) {
-      return false;
-    }
-  }
-  updateErrorMessage(fieldName, field, message) {
-    if (message == undefined) {
-      message = this._dataUnit.getInvalidMessage(this.getCurrentRecordId(), fieldName);
-    }
-    if (!field["errorMessage"]) {
-      field["errorMessage"] = message;
-    }
-  }
-  getErrorMessage(fieldName) {
-    if (this._fields.has(fieldName)) {
-      const fieldElement = this._fields.get(fieldName).field;
-      return fieldElement["errorMessage"];
-    }
-    return undefined;
-  }
-  updateBind(fieldName, field) {
-    const oldBind = this._fields.get(fieldName);
-    if (oldBind) {
-      oldBind.destroy();
-    }
-    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);
-  }
-  changeStarted(fieldName, waitingChange) {
-    /**
-     * se o waitingChange não é blocante, add um event listener pra
-     * fazer o accept da promise
-     *
-     * se não tiver promise no waitingChange, eu crio uma e resolvo no bind
-     *
-     *
-     */
-    if (this._dataUnit.records.length === 0) {
-      this._dataUnit.addRecord();
-    }
-    if (!waitingChange.blocking && waitingChange.promise == undefined) {
-      const bind = this._fields.get(fieldName);
-      if (bind) {
-        waitingChange.promise = new Promise((resolve, reject) => {
-          bind.waitingChangePromiseResolve = resolve;
-          bind.waitingChangePromiseReject = reject;
-        });
-      }
-    }
-    this._dataUnit.startChange(fieldName, waitingChange);
-  }
-  cancelWaitingChange(fieldName) {
-    if (this._dataUnit.waitingForChange(fieldName)) {
-      this._dataUnit.cancelWaitingChange(fieldName);
-      const bind = this._fields.get(fieldName);
-      if (bind) {
-        bind.rejectWaitingChange(new WaitingChangeException("Change canceled", fieldName));
-      }
-    }
-  }
-  setFieldValue(fieldName, newValue) {
-    if (this._dataUnit.records.length === 0) {
-      this._dataUnit.addRecord();
-    }
-    this._dataUnit.clearInvalid(this.getCurrentRecordId(), fieldName);
-    const record = this._dataUnit.getSelectedRecord();
-    this._dataUnit.setFieldValue(fieldName, newValue, record ? [record.__record__id__] : undefined);
-    if (this._dataUnit.waitingForChange(fieldName)) {
-      const bind = this._fields.get(fieldName);
-      if (bind) {
-        bind.acceptWaitingChange();
-      }
-    }
-  }
-  bindSearchOptionsLoader(fieldName, field) {
-    if (field.nodeName === "EZ-SEARCH" && field["optionLoader"] == undefined) {
-      const loader = ApplicationContext.getContextValue("__EZUI__SEARCH__OPTION__LOADER__");
-      if (loader) {
-        field["optionLoader"] = (arg) => {
-          return loader(arg, fieldName, this._dataUnit);
-        };
-      }
-    }
-  }
-  applyEzUploadContext(fieldName, field) {
-    var _a, _b;
-    if (field.nodeName === "EZ-UPLOAD") {
-      field["urlUpload"] = ApplicationContext.getContextValue("__EZUI__UPLOAD__ADD__URL__");
-      field["urlDelete"] = ApplicationContext.getContextValue("__EZUI__UPLOAD__DEL__URL__");
-      const descriptor = this._dataUnit.getField(fieldName);
-      const destination = (_a = descriptor.properties) === null || _a === void 0 ? void 0 : _a.DESTINATION;
-      if (destination) {
-        field["requestHeaders"] = { XTRAINF: `{"destination": "${destination}"}` };
-      }
-      field["maxFiles"] = ((_b = descriptor.properties) === null || _b === void 0 ? void 0 : _b.MAX_FILES) || 0;
-    }
-  }
-  interceptAction(action) {
-    if (action.type === Action.RECORDS_COPIED) {
-      const cleanFields = this._formMetadata.getCleanOnCopyFields();
-      if (cleanFields) {
-        const records = action.payload;
-        return new DataUnitAction(Action.RECORDS_COPIED, records.map(record => {
-          const newRecord = Object.assign({}, record);
-          cleanFields.forEach(fieldName => delete newRecord[fieldName]);
-          return newRecord;
-        }));
-      }
-    }
-    if (action.type === Action.SAVING_DATA) {
-      return new Promise((resolve) => {
-        this.validate()
-          .then(() => resolve(action))
-          .catch(() => { });
-      });
-    }
-    if (action.type === Action.RECORDS_ADDED) {
-      const defaultValues = this.getDefaultValues();
-      if (defaultValues) {
-        const records = action.payload;
-        return new DataUnitAction(Action.RECORDS_ADDED, records.map(record => {
-          return Object.assign(Object.assign({}, record), defaultValues);
-        }));
-      }
-    }
-    return action;
-  }
-  getDefaultValues() {
-    var _a;
-    const rawDefaultValues = (_a = this._formMetadata) === null || _a === void 0 ? void 0 : _a.getDefaultValues();
-    if (rawDefaultValues) {
-      const defaultValues = {};
-      for (const field in rawDefaultValues) {
-        defaultValues[field] = this._dataUnit.valueFromString(field, rawDefaultValues[field]);
-      }
-      return defaultValues;
-    }
-    return undefined;
-  }
-}
-class Bind {
-  constructor() {
-    this.listen = true;
-    this.startChangeEventName = "ezStartChange";
-    this.cancelWaitingChangeEventName = "ezCancelWaitingChange";
-    this.changeEventName = "ezChange";
-  }
-  destroy() {
-    this.field.removeEventListener(this.startChangeEventName, this.startChangeListener);
-    this.field.removeEventListener(this.cancelWaitingChangeEventName, this.cancelWaitingChangeListener);
-    this.field.removeEventListener(this.changeEventName, this.changeListener);
-  }
-  acceptWaitingChange() {
-    if (this.waitingChangePromiseResolve) {
-      this.waitingChangePromiseResolve();
-      this.waitingChangePromiseReject = undefined;
-      this.waitingChangePromiseResolve = undefined;
-    }
-  }
-  rejectWaitingChange(reason) {
-    if (this.waitingChangePromiseReject) {
-      this.waitingChangePromiseReject(reason);
-      this.waitingChangePromiseReject = undefined;
-      this.waitingChangePromiseResolve = undefined;
-    }
-  }
-  static create(fieldName, field, startChangeCallback, cancelWaitingChangeCallback, changeCallback) {
-    const b = new Bind();
-    b.field = field;
-    b.fieldName = fieldName;
-    b.startChangeListener = (evt) => { if (b.listen)
-      startChangeCallback(fieldName, evt.detail); };
-    b.field.addEventListener(b.startChangeEventName, b.startChangeListener);
-    b.cancelWaitingChangeListener = () => { if (b.listen)
-      cancelWaitingChangeCallback(fieldName); };
-    b.field.addEventListener(b.cancelWaitingChangeEventName, b.cancelWaitingChangeListener);
-    b.changeListener = (evt) => { if (b.listen)
-      changeCallback(fieldName, evt.detail); };
-    b.field.addEventListener(b.changeEventName, b.changeListener);
-    return b;
-  }
-}
-
 /**
  * Adapted from React: https://github.com/facebook/react/blob/master/packages/shared/formatProdErrorMessage.js
  *
@@ -876,12 +557,14 @@ const EzForm = class {
     this.ezReady = createEvent(this, "ezReady", 7);
     this.formItemsReady = createEvent(this, "formItemsReady", 7);
     this._customEditors = new Map();
+    this._application = ApplicationContext.getContextValue("__SNK__APPLICATION__");
     this.onDataUnitAction = (action) => {
       if (action.type === Action.METADATA_LOADED) {
         this.processMetadata();
       }
     };
     this._fieldsProps = new Map();
+    this._singleColumn = true;
     this.dataUnit = undefined;
     this.config = undefined;
     this.recordsValidator = undefined;
@@ -944,7 +627,7 @@ const EzForm = class {
     }
     this.ezFormSetFields.emit(fields);
     const idFormSheet = `${StringUtils.replaceAccentuatedChars(StringUtils.toCamelCase(currentSheet === null || currentSheet === void 0 ? void 0 : currentSheet.label), false)}_selectorContainer`;
-    return (h("div", { class: "dynamic-content", "data-element-id": idFormSheet }, h("ez-form-view", { ref: (element) => (this._formView = element), class: "ez-row ez-padding-vertical--small", fields: fields, selectedRecord: this.dataUnit.getSelectedRecord() })));
+    return (h("div", { class: "dynamic-content", "data-element-id": idFormSheet }, h("ez-form-view", { ref: (element) => (this._formView = element), class: "ez-row ez-padding-vertical--small", fields: fields, singleColumn: this._singleColumn, selectedRecord: this.dataUnit.getSelectedRecord() })));
   }
   processMetadata() {
     if (this.bindFields() && this.dataUnit && this._store) {
@@ -959,10 +642,12 @@ const EzForm = class {
   bindFields() {
     return !this.isStatic() || this.onlyStaticFields === false;
   }
-  componentWillLoad() {
+  async componentWillLoad() {
+    var _a;
     if (this.dataUnit === undefined) {
       this.dataUnit = new DataUnit("ez-form");
     }
+    this.dataUnit.unsubscribe(this.onDataUnitAction);
     this.dataUnit.subscribe(this.onDataUnitAction);
     this._dataBinder = new DataBinder(this.dataUnit);
     this._store = createStore(formReducer);
@@ -971,6 +656,28 @@ const EzForm = class {
     this.processMetadata();
     const dataInfo = { dataUnit: this.dataUnit };
     ElementIDUtils.addIDInfo(this._element, null, dataInfo);
+    const layoutFormConfig = await ((_a = this._application) === null || _a === void 0 ? void 0 : _a.getLayoutFormConfig());
+    this.setSingleColumn(layoutFormConfig);
+    this.registerNotifyListeners(layoutFormConfig);
+  }
+  async setSingleColumn(layoutFormConfig) {
+    if (!(layoutFormConfig === null || layoutFormConfig === void 0 ? void 0 : layoutFormConfig.config)) {
+      this._singleColumn = true;
+      return;
+    }
+    this._singleColumn = layoutFormConfig.config === FormLayout.CASCADE ? true : false;
+  }
+  async registerNotifyListeners(layoutFormConfig) {
+    if (!layoutFormConfig)
+      return;
+    layoutFormConfig.onConfigChange((config) => {
+      if (config === FormLayout.CASCADE) {
+        this._singleColumn = true;
+      }
+      else {
+        this._singleColumn = false;
+      }
+    });
   }
   componentDidRender() {
     const metadata = selectFormMetadata(this._store.getState());