@sankhyalabs/ezui 7.1.0-dev.21 → 7.1.0-dev.23

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

@@ -4,21 +4,27 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-a7b0c73d.js');
 const core = require('@sankhyalabs/core');
+const FormLayout = require('./FormLayout-fe8da83c.js');
 const CheckMode = require('./CheckMode-ecb90b87.js');
-const index$1 = require('./index-e61642ff.js');
+const index$1 = require('./index-350d0fa0.js');
 
-const buildSwitch = (field) => {
-  return buildField(field.name, field.label, field.readOnly, field.contextName, true);
+const buildSwitch = (field, context) => {
+  return buildField(field.name, field.label, field.readOnly, field.contextName, true, context);
 };
-const buildCheckBox = (field) => {
-  return buildField(field.name, field.label, field.readOnly, field.contextName, false);
+const buildCheckBox = (field, context) => {
+  return buildField(field.name, field.label, field.readOnly, field.contextName, false, context);
 };
-function buildField(fieldName, fieldLabel, readOnly, contextName, switchMode) {
-  return (index.h("div", { class: "ez-col ez-col--sd-12 ez-align--middle ez-padding-top--medium ez-padding-bottom--medium" },
+function buildField(fieldName, fieldLabel, readOnly, contextName, switchMode, context) {
+  const shouldUseClassic = (context === null || context === void 0 ? void 0 : context.formLayout) === FormLayout.FormLayout.CLASSIC_CASCADE ||
+    (context === null || context === void 0 ? void 0 : context.formLayout) === FormLayout.FormLayout.CLASSIC_SIDE_BY_SIDE;
+  return (index.h("div", { class: `ez-col ez-col--sd-12 ez-align--middle ez-padding-top--medium ez-padding-bottom--medium ez-size-height--full ${shouldUseClassic ? "ez-margin-top--small" : ""}` },
     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 })));
 }
 
-const buildComboBox = ({ name, label, readOnly, required, props, contextName, canShowError }) => {
+const buildComboBox = ({ name, label, readOnly, required, props, contextName, canShowError }, context) => {
+  var _a;
+  const shouldUseClassic = (context === null || context === void 0 ? void 0 : context.formLayout) === FormLayout.FormLayout.CLASSIC_CASCADE ||
+    (context === null || context === void 0 ? void 0 : context.formLayout) === FormLayout.FormLayout.CLASSIC_SIDE_BY_SIDE;
   const prop = props === null || props === void 0 ? void 0 : props.options;
   let options;
   if (typeof prop === "string") {
@@ -28,29 +34,60 @@ const buildComboBox = ({ name, label, readOnly, required, props, contextName, ca
   else {
     options = prop;
   }
+  if (shouldUseClassic) {
+    return (index.h("div", { class: "ez-col ez-col--sd-12" },
+      index.h("ez-classic-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, size: (_a = context === null || context === void 0 ? void 0 : context.size) !== null && _a !== void 0 ? _a : "small", required: required })));
+  }
   return (index.h("div", { class: "ez-col ez-col--sd-12" },
     index.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 }) => {
+const buildDate = ({ name, label, readOnly, canShowError, props, required }, context) => {
+  var _a;
+  const shouldUseClassic = (context === null || context === void 0 ? void 0 : context.formLayout) === FormLayout.FormLayout.CLASSIC_CASCADE ||
+    (context === null || context === void 0 ? void 0 : context.formLayout) === FormLayout.FormLayout.CLASSIC_SIDE_BY_SIDE;
+  if (shouldUseClassic) {
+    return (index.h("div", { class: "ez-col ez-col--sd-12" },
+      index.h("ez-classic-date-input", { class: "ez-input__no-margin", enabled: !readOnly, label: label, "data-field-name": name, key: name, canShowError: canShowError, size: (_a = context === null || context === void 0 ? void 0 : context.size) !== null && _a !== void 0 ? _a : "small", required: required })));
+  }
   return (index.h("div", { class: "ez-col ez-col--sd-12" },
     index.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, props }) => {
-  var _a;
+const buildTime = ({ name, label, readOnly, canShowError, props, required }, context) => {
+  var _a, _b, _c;
+  const shouldUseClassic = (context === null || context === void 0 ? void 0 : context.formLayout) === FormLayout.FormLayout.CLASSIC_CASCADE ||
+    (context === null || context === void 0 ? void 0 : context.formLayout) === FormLayout.FormLayout.CLASSIC_SIDE_BY_SIDE;
+  if (shouldUseClassic) {
+    return (index.h("div", { class: "ez-col ez-col--sd-12" },
+      index.h("ez-classic-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, size: (_b = context === null || context === void 0 ? void 0 : context.size) !== null && _b !== void 0 ? _b : "small", required: required })));
+  }
   return (index.h("div", { class: "ez-col ez-col--sd-12" },
-    index.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 })));
+    index.h("ez-time-input", { class: "ez-input__no-margin", enabled: !readOnly, label: label, "data-field-name": name, key: name, canShowError: canShowError, "show-seconds": (_c = props === null || props === void 0 ? void 0 : props.showSeconds) !== null && _c !== void 0 ? _c : false })));
 };
-const buildTimeSeconds = ({ name, label, readOnly, canShowError }) => {
+const buildTimeSeconds = ({ name, label, readOnly, canShowError, props, required }, context) => {
+  var _a;
+  const shouldUseClassic = (context === null || context === void 0 ? void 0 : context.formLayout) === FormLayout.FormLayout.CLASSIC_CASCADE ||
+    (context === null || context === void 0 ? void 0 : context.formLayout) === FormLayout.FormLayout.CLASSIC_SIDE_BY_SIDE;
+  if (shouldUseClassic) {
+    return (index.h("div", { class: "ez-col ez-col--sd-12" },
+      index.h("ez-classic-time-input", { class: "ez-input__no-margin", enabled: !readOnly, label: label, "data-field-name": name, key: name, canShowError: canShowError, showSeconds: true, size: (_a = context === null || context === void 0 ? void 0 : context.size) !== null && _a !== void 0 ? _a : "small", required: required })));
+  }
   return (index.h("div", { class: "ez-col ez-col--sd-12" },
     index.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 }) => {
+const buildDateTime = ({ name, label, readOnly, contextName, canShowError, props, required }, context) => {
+  var _a;
+  const shouldUseClassic = (context === null || context === void 0 ? void 0 : context.formLayout) === FormLayout.FormLayout.CLASSIC_CASCADE ||
+    (context === null || context === void 0 ? void 0 : context.formLayout) === FormLayout.FormLayout.CLASSIC_SIDE_BY_SIDE;
+  if (shouldUseClassic) {
+    return (index.h("div", { class: "ez-col ez-col--sd-12" },
+      index.h("ez-classic-date-time-input", { class: "ez-input__no-margin", enabled: !readOnly, label: label, "data-field-name": name, "data-context-name": contextName, key: name, canShowError: canShowError, size: (_a = context === null || context === void 0 ? void 0 : context.size) !== null && _a !== void 0 ? _a : "small", required: required })));
+  }
   return (index.h("div", { class: "ez-col ez-col--sd-12" },
     index.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 }) => {
+const buildFile = ({ name, label, readOnly, contextName, props }, context) => {
   const uploadProps = core.ObjectUtils.removeEmptyValues({
     subTitle: props.subTitle,
     requestHeaders: Object.assign(Object.assign({}, (props.STORAGESTRATEGY && {
@@ -63,44 +100,77 @@ const buildFile = ({ name, label, readOnly, contextName, props }) => {
     index.h("ez-upload", Object.assign({ enabled: !readOnly, label: label, "data-field-name": name, "data-context-name": contextName, key: name }, uploadProps))));
 };
 
-const buildDecimal = ({ name, label, readOnly, props, contextName, canShowError }) => {
+const buildDecimal = ({ name, label, readOnly, props, contextName, canShowError, required }, context) => {
   var _a, _b;
   const precision = Number((_a = props === null || props === void 0 ? void 0 : props.precision) !== null && _a !== void 0 ? _a : 2);
   const prettyPrecision = Number((_b = props === null || props === void 0 ? void 0 : props.prettyPrecision) !== null && _b !== void 0 ? _b : precision);
-  return buildNumeric(name, label, readOnly, precision, prettyPrecision, contextName, canShowError);
+  return buildNumeric(name, label, readOnly, precision, prettyPrecision, contextName, canShowError, props, required, context);
 };
-const buildInteger = ({ name, label, readOnly, contextName, canShowError }) => {
-  return buildNumeric(name, label, readOnly, 0, 0, contextName, canShowError);
+const buildInteger = ({ name, label, readOnly, contextName, canShowError, props, required }, context) => {
+  return buildNumeric(name, label, readOnly, 0, 0, contextName, canShowError, props, required, context);
 };
-function buildNumeric(fieldName, fieldLabel, readOnly, precision, prettyPrecision, contextName, canShowError) {
+function buildNumeric(fieldName, fieldLabel, readOnly, precision, prettyPrecision, contextName, canShowError, props, required, context) {
+  var _a;
+  const shouldUseClassic = (context === null || context === void 0 ? void 0 : context.formLayout) === FormLayout.FormLayout.CLASSIC_CASCADE ||
+    (context === null || context === void 0 ? void 0 : context.formLayout) === FormLayout.FormLayout.CLASSIC_SIDE_BY_SIDE;
+  if (shouldUseClassic) {
+    return (index.h("div", { class: "ez-col ez-col--sd-12" },
+      index.h("ez-classic-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, size: (_a = context === null || context === void 0 ? void 0 : context.size) !== null && _a !== void 0 ? _a : "small", required: required })));
+  }
   return (index.h("div", { class: "ez-col ez-col--sd-12" },
     index.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 buildTextArea = ({ name, label, readOnly, contextName, rows, canShowError }) => {
+const buildTextArea = ({ name, label, readOnly, rows, contextName, canShowError, props, required }, context) => {
+  const shouldUseClassic = (context === null || context === void 0 ? void 0 : context.formLayout) === FormLayout.FormLayout.CLASSIC_CASCADE ||
+    (context === null || context === void 0 ? void 0 : context.formLayout) === FormLayout.FormLayout.CLASSIC_SIDE_BY_SIDE;
+  if (shouldUseClassic) {
+    return (index.h("div", { class: "ez-col ez-col--sd-12", key: name },
+      index.h("ez-classic-text-area", { enabled: !readOnly, label: label, "data-field-name": name, "data-context-name": contextName, rows: rows })));
+  }
   return (index.h("div", { class: "ez-col ez-col--sd-12", key: name },
     index.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, props }) => {
+const buildTextInput = ({ name, label, readOnly, contextName, canShowError, props, required }, context) => {
+  var _a;
+  const shouldUseClassic = (context === null || context === void 0 ? void 0 : context.formLayout) === FormLayout.FormLayout.CLASSIC_CASCADE ||
+    (context === null || context === void 0 ? void 0 : context.formLayout) === FormLayout.FormLayout.CLASSIC_SIDE_BY_SIDE;
+  if (shouldUseClassic) {
+    return (index.h("div", { class: "ez-col ez-col--sd-12" },
+      index.h("ez-classic-input", { class: "ez-input__no-margin", label: label, "data-field-name": name, "data-context-name": contextName, key: name, enabled: !readOnly, mask: props === null || props === void 0 ? void 0 : props.mask, "clean-value-mask": props === null || props === void 0 ? void 0 : props.cleanValueMask, size: (_a = context === null || context === void 0 ? void 0 : context.size) !== null && _a !== void 0 ? _a : "small", required: required })));
+  }
   return (index.h("div", { class: "ez-col ez-col--sd-12" },
     index.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 buildSearchPlus = ({ name, label, readOnly, contextName, canShowError, optionLoader, props, required }, context) => {
+  var _a;
+  const shouldUseClassic = (context === null || context === void 0 ? void 0 : context.formLayout) === FormLayout.FormLayout.CLASSIC_CASCADE ||
+    (context === null || context === void 0 ? void 0 : context.formLayout) === FormLayout.FormLayout.CLASSIC_SIDE_BY_SIDE;
   const hasDescriptionField = !core.StringUtils.isEmpty(props === null || props === void 0 ? void 0 : props.DESCRIPTIONFIELD);
+  if (shouldUseClassic) {
+    return (index.h("div", { class: "ez-col ez-col--sd-12" },
+      index.h("ez-classic-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, size: (_a = context === null || context === void 0 ? void 0 : context.size) !== null && _a !== void 0 ? _a : "small", required: required })));
+  }
   return (index.h("div", { class: "ez-col ez-col--sd-12" },
     index.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;
+const buildSearch = ({ name, label, readOnly, required, contextName, canShowError, optionLoader, props }, context) => {
+  var _a, _b, _c;
   const hasDescriptionField = !core.StringUtils.isEmpty(props === null || props === void 0 ? void 0 : props.DESCRIPTIONFIELD);
+  const shouldUseClassic = (context === null || context === void 0 ? void 0 : context.formLayout) === FormLayout.FormLayout.CLASSIC_CASCADE ||
+    (context === null || context === void 0 ? void 0 : context.formLayout) === FormLayout.FormLayout.CLASSIC_SIDE_BY_SIDE;
+  if (shouldUseClassic) {
+    return (index.h("div", { class: "ez-col ez-col--sd-12" },
+      index.h("ez-classic-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, hideDescriptionInput: !hasDescriptionField, size: (_b = context === null || context === void 0 ? void 0 : context.size) !== null && _b !== void 0 ? _b : "small", required: required })));
+  }
   return (index.h("div", { class: "ez-col ez-col--sd-12" },
-    index.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, hideDescriptionInput: !hasDescriptionField })));
+    index.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: (_c = props === null || props === void 0 ? void 0 : props.ignoreLimitCharsToSearch) !== null && _c !== void 0 ? _c : false, hideDescriptionInput: !hasDescriptionField })));
 };
 
-const buildRichText = ({ name, label, readOnly, contextName, rows, canShowError }) => {
+const buildRichText = ({ name, label, readOnly, contextName, rows, canShowError }, context) => {
   return (index.h("div", { class: "ez-col ez-col--sd-12" },
     index.h("ez-rich-text", { key: name, enabled: !readOnly, label: label, "data-field-name": name, "data-context-name": contextName, rows: rows, canShowError: canShowError })));
 };
@@ -126,11 +196,13 @@ uiBuilders.set(core.UserInterface.SEARCHPLUS, buildSearchPlus);
 uiBuilders.set(core.UserInterface.LONGTEXT, buildTextArea);
 uiBuilders.set(core.UserInterface.HTML, buildRichText);
 uiBuilders.set(core.UserInterface.IMAGE, buildImage);
-const fieldBuilder = (field, customUiBuilders = new Map()) => {
+const fieldBuilder = (field, customUiBuilders = new Map(), context) => {
   const i18n = index$1.getI18n();
+  const shouldUseClassic = (context === null || context === void 0 ? void 0 : context.formLayout) === FormLayout.FormLayout.CLASSIC_CASCADE ||
+    (context === null || context === void 0 ? void 0 : context.formLayout) === FormLayout.FormLayout.CLASSIC_SIDE_BY_SIDE;
   const builder = (customUiBuilders.get(field.userInterface) || uiBuilders.get(field.userInterface)) || buildTextInput;
-  const label = field.required ? `${field.label}${i18n("app.requiredInfo")}` : field.label;
-  const builtElement = builder(Object.assign(Object.assign({}, field), { label }));
+  const label = !shouldUseClassic && field.required ? `${field.label}${i18n("app.requiredInfo")}` : field.label;
+  const builtElement = builder(Object.assign(Object.assign({}, field), { label }), context);
   //@ts-ignore
   builtElement.$attrs$['data-form-item'] = field.name;
   return builtElement;
@@ -142,7 +214,7 @@ class FormItem {
   }
   addRightElement(el) {
     this.removeRightElement();
-    el.classList.add('ez-padding-left--small');
+    el.classList.add('ez-padding-left--small', 'ez-margin-top--auto', 'ez-margin-bottom--extra-small');
     el.setAttribute('data-custom-item', 'true');
     this.elem.classList.add('ez-col--nowrap');
     this.elem.appendChild(el);
@@ -171,17 +243,19 @@ 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--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 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--gap:var(--space--14, 14px);--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--gap);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%}*.sc-ez-form-view:has(*)+ez-collapsible-box.sc-ez-form-view{margin-top:var(--space--16, 16px)}";
 
 const EzFormView = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
     this.ezContentReady = index.createEvent(this, "ezContentReady", 7);
     this.formItemsReady = index.createEvent(this, "formItemsReady", 7);
+    this.MAIN_GROUP_NAME = "__main";
     this._customEditors = new Map();
     this.fields = undefined;
     this.selectedRecord = undefined;
     this.singleColumn = false;
+    this.formLayout = undefined;
     this.customUiBuilders = new Map();
   }
   async showUp() {
@@ -210,10 +284,18 @@ const EzFormView = class {
     });
     this.fields = [...fields];
   }
+  getGroupByField(field) {
+    var _a, _b;
+    const group = (_a = field.group) !== null && _a !== void 0 ? _a : (_b = field.props) === null || _b === void 0 ? void 0 : _b["UITabName"];
+    if (group && group !== this.MAIN_GROUP_NAME) {
+      return group;
+    }
+    return undefined;
+  }
   groupFields(fields) {
     const result = new Map();
     fields.forEach(item => {
-      const groupLabel = item.group;
+      const groupLabel = this.getGroupByField(item);
       if (groupLabel) {
         let groupFields = result.get(groupLabel);
         if (groupFields == undefined) {
@@ -246,12 +328,16 @@ const EzFormView = class {
     if (this.isItemFullWidth(item.userInterface)) {
       classItem += " input-full_width";
     }
+    const context = {
+      formLayout: this.formLayout,
+      size: "xsmall",
+    };
     if (this._customEditors.has(item.name)) {
       const value = (_a = this._formElements.map(el => ({ name: el.dataset.fieldName, value: el['value'] })).find(field => field.name === item.name)) === null || _a === void 0 ? void 0 : _a.value;
       const customEditor = this._customEditors.get(item.name).customEditor;
-      return index.h("div", { class: classItem }, index.h("ez-custom-form-input", { "data-field-name": item.name, customEditor: customEditor, formViewField: item, builderFallback: (field) => fieldBuilder(field, this.customUiBuilders), value: value, selectedRecord: this.selectedRecord }));
+      return index.h("div", { class: classItem }, index.h("ez-custom-form-input", { "data-field-name": item.name, customEditor: customEditor, formViewField: item, builderFallback: (field) => fieldBuilder(field, this.customUiBuilders, context), value: value, selectedRecord: this.selectedRecord }));
     }
-    return index.h("div", { class: classItem }, fieldBuilder(item, this.customUiBuilders));
+    return index.h("div", { class: classItem }, fieldBuilder(item, this.customUiBuilders, context));
   }
   render() {
     core.ElementIDUtils.addIDInfoIfNotExists(this._element, 'ezFormView');

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

@@ -4,12 +4,13 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index$1 = require('./index-a7b0c73d.js');
 const core = require('@sankhyalabs/core');
-const searchColumn = require('./search-column-51e50b59.js');
-const index = require('./index-e61642ff.js');
-const FormLayout = require('./FormLayout-18853e70.js');
-require('./ApplicationUtils-4fb87a9e.js');
+const searchColumn = require('./search-column-fbf680d7.js');
+const index = require('./index-350d0fa0.js');
+const FormLayout = require('./FormLayout-fe8da83c.js');
+require('./ApplicationUtils-006ca96f.js');
 require('./DialogType-2114c337.js');
 require('./CheckMode-ecb90b87.js');
+require('./types-6a5df0c7.js');
 
 const DETAIL_PATTERN = /child\[([^\]]+)\]/;
 const REGEX_DEFAULT_VAR_KEY = /\$\{.+\}/;
@@ -644,6 +645,7 @@ const EzForm = class {
     };
     this._fieldsProps = new Map();
     this._singleColumn = false;
+    this._formLayout = undefined;
     this.dataUnit = undefined;
     this.config = undefined;
     this.recordsValidator = undefined;
@@ -709,7 +711,7 @@ 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$1.h("div", { class: "dynamic-content ez-box--no-outline", "data-element-id": idFormSheet, ref: elem => (this._container = elem), tabindex: "0" }, index$1.h("ez-popover", { ref: elem => (this._ezPopoverSearchField = elem), overlayType: "none" }, this.renderFieldColumn()), index$1.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(), customUiBuilders: this.customUiBuilders })));
+    return (index$1.h("div", { class: "dynamic-content ez-box--no-outline", "data-element-id": idFormSheet, ref: elem => (this._container = elem), tabindex: "0" }, index$1.h("ez-popover", { ref: elem => (this._ezPopoverSearchField = elem), overlayType: "none" }, this.renderFieldColumn()), index$1.h("ez-form-view", { ref: (element) => (this._formView = element), class: "ez-row ez-padding-vertical--small", fields: fields, singleColumn: this._singleColumn, formLayout: this._formLayout, selectedRecord: this.dataUnit.getSelectedRecord(), customUiBuilders: this.customUiBuilders })));
   }
   renderFieldColumn() {
     if (this._fieldSearch != undefined) {
@@ -793,18 +795,20 @@ const EzForm = class {
     this._i18n = await index.initI18n();
   }
   async setSingleColumn(layoutFormConfig) {
-    this._singleColumn = (layoutFormConfig === null || layoutFormConfig === void 0 ? void 0 : layoutFormConfig.config) === FormLayout.FormLayout.CASCADE;
+    this._singleColumn = (layoutFormConfig === null || layoutFormConfig === void 0 ? void 0 : layoutFormConfig.config) === FormLayout.FormLayout.CASCADE || (layoutFormConfig === null || layoutFormConfig === void 0 ? void 0 : layoutFormConfig.config) === FormLayout.FormLayout.CLASSIC_CASCADE;
+    this._formLayout = layoutFormConfig === null || layoutFormConfig === void 0 ? void 0 : layoutFormConfig.config;
   }
   async registerNotifyListeners(layoutFormConfig) {
     if (!layoutFormConfig)
       return;
     layoutFormConfig.onConfigChange((config) => {
-      if (config === FormLayout.FormLayout.CASCADE) {
+      if (config === FormLayout.FormLayout.CASCADE || config === FormLayout.FormLayout.CLASSIC_CASCADE) {
         this._singleColumn = true;
       }
       else {
         this._singleColumn = false;
       }
+      this._formLayout = config;
     });
   }
   componentDidRender() {

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

@@ -5,12 +5,13 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index$1 = require('./index-a7b0c73d.js');
 const core = require('@sankhyalabs/core');
 const DataUnit = require('@sankhyalabs/core/dist/dataunit/DataUnit');
-const ApplicationUtils = require('./ApplicationUtils-4fb87a9e.js');
+const ApplicationUtils = require('./ApplicationUtils-006ca96f.js');
 require('./DialogType-2114c337.js');
 require('./CheckMode-ecb90b87.js');
-const index = require('./index-e61642ff.js');
-const FormLayout = require('./FormLayout-18853e70.js');
-const searchColumn = require('./search-column-51e50b59.js');
+const index = require('./index-350d0fa0.js');
+const types = require('./types-6a5df0c7.js');
+require('./FormLayout-fe8da83c.js');
+const searchColumn = require('./search-column-fbf680d7.js');
 const constants = require('./constants-72b7e05e.js');
 const FocusResolver = require('./FocusResolver-885f2173.js');
 const purify = require('./purify-b30a5718.js');
@@ -50748,7 +50749,7 @@ class EzGridCustomCellEditor extends EzCellEditor {
       charPress: params.charPress,
       currentEditor: this._defaultGui,
       name: this._fieldName,
-      source: FormLayout.CustomEditorSource.GRID,
+      source: types.CustomEditorSource.GRID,
       detailContext: params.customEditorsInfo.detailContext,
       setValue: (value) => this.setValue(value),
       getValue: () => this.getValue(),
@@ -50855,7 +50856,7 @@ class EzGridCustomCellRender extends EzCellRender {
       charPress: '',
       currentRender: super.getGui(),
       name: this._fieldName,
-      source: FormLayout.CustomRenderSource.GRID,
+      source: types.CustomRenderSource.GRID,
       getValue: () => params.getValue(),
       detailContext: params.customRendersInfo.detailContext,
       renderMetadata: {

package/dist/cjs/ez-guide-navigator.cjs.entry.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-a7b0c73d.js');
 const core = require('@sankhyalabs/core');
 const EzScrollDirection = require('./EzScrollDirection-b2c99895.js');
-const index$1 = require('./index-e61642ff.js');
+const index$1 = require('./index-350d0fa0.js');
 
 const ezGuideNavigatorCss = ":host{--ez-guide-navigator--padding-left:var(--space--large);--ez-guide-navigator--padding-right:var(--space--small);--ez-guide-navigator--box-shadow:var(--shadow, 0px 0px 24px 0px #000);--ez-guide-navigator--background-color:var(--color--inverted);--ez-guide-navigator--border-radius:0px var(--border--radius-medium) var(--border--radius-medium) 0px;--ez-guide-navigator--actions-gap:var(--space--medium);--ez-guide-navigator--actions-margin:var(--space--large) 0 var(--space--medium);--ez-guide-navigator--actions-padding-right:calc(var(--space--medium, 12px) + var(--space--small, 6px))}.inverted{transform:rotate(180deg)}.ez-guide-navigator{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;height:100%;padding-left:var(--ez-guide-navigator--padding-left);padding-right:var(--ez-guide-navigator--padding-right);background-color:var(--ez-guide-navigator--background-color);-webkit-box-shadow:var(--ez-guide-navigator--box-shadow);box-shadow:var(--ez-guide-navigator--box-shadow);border-radius:var(--ez-guide-navigator--border-radius)}.ez-guide-navigator__actions{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;gap:var(--ez-guide-navigator--actions-gap);margin:var(--ez-guide-navigator--actions-margin);padding-right:var(--ez-guide-navigator--actions-padding-right)}.hidden{display:none}";