@sankhyalabs/ezui 7.2.0 → 7.3.0

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

@@ -1,26 +1,20 @@
 import { h, r as registerInstance, c as createEvent, g as getElement, H as Host } from './index-baa5e267.js';
 import { ObjectUtils, StringUtils, UserInterface, ElementIDUtils } from '@sankhyalabs/core';
-import { F as FormLayout } from './FormLayout-bda67973.js';
 import { C as CheckMode } from './CheckMode-bdb2ec19.js';
-import { g as getI18n } from './index-b5a15d4b.js';
+import { g as getI18n } from './index-41363fa6.js';
 
-const buildSwitch = (field, context) => {
-  return buildField(field.name, field.label, field.readOnly, field.contextName, true, context);
+const buildSwitch = (field) => {
+  return buildField(field.name, field.label, field.readOnly, field.contextName, true);
 };
-const buildCheckBox = (field, context) => {
-  return buildField(field.name, field.label, field.readOnly, field.contextName, false, context);
+const buildCheckBox = (field) => {
+  return buildField(field.name, field.label, field.readOnly, field.contextName, false);
 };
-function buildField(fieldName, fieldLabel, readOnly, contextName, switchMode, context) {
-  const shouldUseClassic = (context === null || context === void 0 ? void 0 : context.formLayout) === FormLayout.CLASSIC_CASCADE ||
-    (context === null || context === void 0 ? void 0 : context.formLayout) === FormLayout.CLASSIC_SIDE_BY_SIDE;
-  return (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" : ""}` },
+function buildField(fieldName, fieldLabel, readOnly, contextName, switchMode) {
+  return (h("div", { class: "ez-col ez-col--sd-12 ez-align--middle ez-padding-top--medium ez-padding-bottom--medium" },
     h("ez-check", { enabled: !readOnly, label: fieldLabel, mode: switchMode ? CheckMode.SWITCH : CheckMode.REGULAR, "data-field-name": fieldName, "data-context-name": contextName, key: fieldName })));
 }
 
-const buildComboBox = ({ name, label, readOnly, required, props, contextName, canShowError }, context) => {
-  var _a;
-  const shouldUseClassic = (context === null || context === void 0 ? void 0 : context.formLayout) === FormLayout.CLASSIC_CASCADE ||
-    (context === null || context === void 0 ? void 0 : context.formLayout) === FormLayout.CLASSIC_SIDE_BY_SIDE;
+const buildComboBox = ({ name, label, readOnly, required, props, contextName, canShowError }) => {
   const prop = props === null || props === void 0 ? void 0 : props.options;
   let options;
   if (typeof prop === "string") {
@@ -30,60 +24,29 @@ const buildComboBox = ({ name, label, readOnly, required, props, contextName, ca
   else {
     options = prop;
   }
-  if (shouldUseClassic) {
-    return (h("div", { class: "ez-col ez-col--sd-12" },
-      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 (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, props, required }, context) => {
-  var _a;
-  const shouldUseClassic = (context === null || context === void 0 ? void 0 : context.formLayout) === FormLayout.CLASSIC_CASCADE ||
-    (context === null || context === void 0 ? void 0 : context.formLayout) === FormLayout.CLASSIC_SIDE_BY_SIDE;
-  if (shouldUseClassic) {
-    return (h("div", { class: "ez-col ez-col--sd-12" },
-      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 })));
-  }
+const buildDate = ({ name, label, readOnly, 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, props, required }, context) => {
-  var _a, _b, _c;
-  const shouldUseClassic = (context === null || context === void 0 ? void 0 : context.formLayout) === FormLayout.CLASSIC_CASCADE ||
-    (context === null || context === void 0 ? void 0 : context.formLayout) === FormLayout.CLASSIC_SIDE_BY_SIDE;
-  if (shouldUseClassic) {
-    return (h("div", { class: "ez-col ez-col--sd-12" },
-      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 })));
-  }
+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": (_c = props === null || props === void 0 ? void 0 : props.showSeconds) !== null && _c !== void 0 ? _c : false })));
+    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, props, required }, context) => {
-  var _a;
-  const shouldUseClassic = (context === null || context === void 0 ? void 0 : context.formLayout) === FormLayout.CLASSIC_CASCADE ||
-    (context === null || context === void 0 ? void 0 : context.formLayout) === FormLayout.CLASSIC_SIDE_BY_SIDE;
-  if (shouldUseClassic) {
-    return (h("div", { class: "ez-col ez-col--sd-12" },
-      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 })));
-  }
+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, props, required }, context) => {
-  var _a;
-  const shouldUseClassic = (context === null || context === void 0 ? void 0 : context.formLayout) === FormLayout.CLASSIC_CASCADE ||
-    (context === null || context === void 0 ? void 0 : context.formLayout) === FormLayout.CLASSIC_SIDE_BY_SIDE;
-  if (shouldUseClassic) {
-    return (h("div", { class: "ez-col ez-col--sd-12" },
-      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 })));
-  }
+const buildDateTime = ({ name, label, readOnly, contextName, 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 }, context) => {
+const buildFile = ({ name, label, readOnly, contextName, props }) => {
   const uploadProps = ObjectUtils.removeEmptyValues({
     subTitle: props.subTitle,
     requestHeaders: Object.assign(Object.assign({}, (props.STORAGESTRATEGY && {
@@ -96,86 +59,48 @@ const buildFile = ({ name, label, readOnly, contextName, props }, context) => {
     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, required }, context) => {
+const buildDecimal = ({ name, label, readOnly, props, contextName, canShowError }) => {
   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, props, required, context);
+  return buildNumeric(name, label, readOnly, precision, prettyPrecision, contextName, canShowError);
 };
-const buildInteger = ({ name, label, readOnly, contextName, canShowError, props, required }, context) => {
-  return buildNumeric(name, label, readOnly, 0, 0, contextName, canShowError, props, required, context);
+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, props, required, context) {
-  var _a;
-  const shouldUseClassic = (context === null || context === void 0 ? void 0 : context.formLayout) === FormLayout.CLASSIC_CASCADE ||
-    (context === null || context === void 0 ? void 0 : context.formLayout) === FormLayout.CLASSIC_SIDE_BY_SIDE;
-  if (shouldUseClassic) {
-    return (h("div", { class: "ez-col ez-col--sd-12" },
-      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 })));
-  }
+function buildNumeric(fieldName, fieldLabel, readOnly, precision, prettyPrecision, contextName, 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 buildTextArea = ({ name, label, readOnly, rows, contextName, canShowError, props, required }, context) => {
-  const shouldUseClassic = (context === null || context === void 0 ? void 0 : context.formLayout) === FormLayout.CLASSIC_CASCADE ||
-    (context === null || context === void 0 ? void 0 : context.formLayout) === FormLayout.CLASSIC_SIDE_BY_SIDE;
-  if (shouldUseClassic) {
-    return (h("div", { class: "ez-col ez-col--sd-12", key: name },
-      h("ez-classic-text-area", { enabled: !readOnly, label: label, "data-field-name": name, "data-context-name": contextName, rows: rows })));
-  }
+const buildTextArea = ({ name, label, readOnly, contextName, rows, canShowError }) => {
   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, props, required }, context) => {
-  var _a;
-  const shouldUseClassic = (context === null || context === void 0 ? void 0 : context.formLayout) === FormLayout.CLASSIC_CASCADE ||
-    (context === null || context === void 0 ? void 0 : context.formLayout) === FormLayout.CLASSIC_SIDE_BY_SIDE;
-  if (shouldUseClassic) {
-    return (h("div", { class: "ez-col ez-col--sd-12" },
-      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 })));
-  }
+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, required }, context) => {
-  var _a;
-  const shouldUseClassic = (context === null || context === void 0 ? void 0 : context.formLayout) === FormLayout.CLASSIC_CASCADE ||
-    (context === null || context === void 0 ? void 0 : context.formLayout) === FormLayout.CLASSIC_SIDE_BY_SIDE;
+const buildSearchPlus = ({ name, label, readOnly, contextName, canShowError, optionLoader, props }) => {
   const hasDescriptionField = !StringUtils.isEmpty(props === null || props === void 0 ? void 0 : props.DESCRIPTIONFIELD);
-  if (shouldUseClassic) {
-    return (h("div", { class: "ez-col ez-col--sd-12" },
-      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 (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 }, context) => {
-  var _a, _b, _c;
+const buildSearch = ({ name, label, readOnly, required, contextName, canShowError, optionLoader, props }) => {
+  var _a;
   const hasDescriptionField = !StringUtils.isEmpty(props === null || props === void 0 ? void 0 : props.DESCRIPTIONFIELD);
-  const shouldUseClassic = (context === null || context === void 0 ? void 0 : context.formLayout) === FormLayout.CLASSIC_CASCADE ||
-    (context === null || context === void 0 ? void 0 : context.formLayout) === FormLayout.CLASSIC_SIDE_BY_SIDE;
-  if (shouldUseClassic) {
-    return (h("div", { class: "ez-col ez-col--sd-12" },
-      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 (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: (_c = props === null || props === void 0 ? void 0 : props.ignoreLimitCharsToSearch) !== null && _c !== void 0 ? _c : false, hideDescriptionInput: !hasDescriptionField })));
+    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 })));
 };
 
-const buildRichText = ({ name, label, readOnly, contextName, rows, canShowError }, context) => {
+const buildRichText = ({ name, label, readOnly, contextName, rows, canShowError }) => {
   return (h("div", { class: "ez-col ez-col--sd-12" },
     h("ez-rich-text", { key: name, enabled: !readOnly, label: label, "data-field-name": name, "data-context-name": contextName, rows: rows, canShowError: canShowError })));
 };
 
-const buildImage = ({ name, label, readOnly, contextName, props }) => {
-  return (h("div", { class: "ez-col ez-col--sd-12" },
-    h("ez-image-input", Object.assign({ enabled: !readOnly, label: label, "data-field-name": name, "data-context-name": contextName, key: name, maxFileSize: Infinity }, props))));
-};
-
 const buildMultiSelectInput = ({ name, label, readOnly, contextName, canShowError, props }) => {
   var _a, _b, _c, _d;
   const rawOptions = props === null || props === void 0 ? void 0 : props.options;
@@ -209,15 +134,12 @@ uiBuilders.set(UserInterface.SEARCH, buildSearch);
 uiBuilders.set(UserInterface.SEARCHPLUS, buildSearchPlus);
 uiBuilders.set(UserInterface.LONGTEXT, buildTextArea);
 uiBuilders.set(UserInterface.HTML, buildRichText);
-uiBuilders.set(UserInterface.IMAGE, buildImage);
 uiBuilders.set(UserInterface.MULTISELECTOR, buildMultiSelectInput);
-const fieldBuilder = (field, customUiBuilders = new Map(), context) => {
+const fieldBuilder = (field) => {
   const i18n = getI18n();
-  const shouldUseClassic = (context === null || context === void 0 ? void 0 : context.formLayout) === FormLayout.CLASSIC_CASCADE ||
-    (context === null || context === void 0 ? void 0 : context.formLayout) === FormLayout.CLASSIC_SIDE_BY_SIDE;
-  const builder = (customUiBuilders.get(field.userInterface) || uiBuilders.get(field.userInterface)) || buildTextInput;
-  const label = !shouldUseClassic && field.required ? `${field.label}${i18n("app.requiredInfo")}` : field.label;
-  const builtElement = builder(Object.assign(Object.assign({}, field), { label }), context);
+  const builder = 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 }));
   //@ts-ignore
   builtElement.$attrs$['data-form-item'] = field.name;
   return builtElement;
@@ -229,7 +151,7 @@ class FormItem {
   }
   addRightElement(el) {
     this.removeRightElement();
-    el.classList.add('ez-padding-left--small', 'ez-margin-top--auto', 'ez-margin-bottom--extra-small');
+    el.classList.add('ez-padding-left--small');
     el.setAttribute('data-custom-item', 'true');
     this.elem.classList.add('ez-col--nowrap');
     this.elem.appendChild(el);
@@ -258,20 +180,17 @@ class FormItems {
   }
 }
 
-const ezFormViewCss = ".sc-ez-form-view-h{display:flex;flex-wrap:wrap;width:100%;--ez-form-view__item--min-width:250px;--ez-form-view__long-item--min-width:530px;--ez-form-view__item--max-width:512px;--ez-form-view__long-item--max-width:100%;--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:1fr}.form-view__content--single-column.sc-ez-form-view>div.sc-ez-form-view:not(.input-full_width){width:clamp(var(--ez-form-view__item--min-width), 70%, var(--ez-form-view__item--max-width))}.input-full_width.sc-ez-form-view{grid-column:1/-1;width:clamp(var(--ez-form-view__long-item--min-width), 100%, var(--ez-form-view__long-item--max-width))}.single-column.sc-ez-form-view{--ez-form-view__long-item--max-width:1024px}*.sc-ez-form-view:has(*)+ez-collapsible-box.sc-ez-form-view{margin-top:var(--space--16, 16px)}";
+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) {
     registerInstance(this, hostRef);
     this.ezContentReady = createEvent(this, "ezContentReady", 7);
     this.formItemsReady = 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() {
     if (this.singleColumn)
@@ -299,18 +218,10 @@ 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 = this.getGroupByField(item);
+      const groupLabel = item.group;
       if (groupLabel) {
         let groupFields = result.get(groupLabel);
         if (groupFields == undefined) {
@@ -341,18 +252,14 @@ const EzFormView = class {
   buildFormItemElement(item, classItem = "") {
     var _a;
     if (this.isItemFullWidth(item.userInterface)) {
-      classItem += ` input-full_width ${this.singleColumn && `single-column`}`;
+      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 h("div", { class: classItem }, 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 h("div", { class: classItem }, h("ez-custom-form-input", { "data-field-name": item.name, customEditor: customEditor, formViewField: item, builderFallback: fieldBuilder, value: value, selectedRecord: this.selectedRecord }));
     }
-    return h("div", { class: classItem }, fieldBuilder(item, this.customUiBuilders, context));
+    return h("div", { class: classItem }, fieldBuilder(item));
   }
   render() {
     ElementIDUtils.addIDInfoIfNotExists(this._element, 'ezFormView');

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

@@ -1,12 +1,11 @@
 import { r as registerInstance, c as createEvent, h, f as forceUpdate, H as Host, g as getElement } from './index-baa5e267.js';
 import { DateUtils, ApplicationContext, Action, StringUtils, KeyboardManager, DataUnit, ElementIDUtils } from '@sankhyalabs/core';
-import { b as buildFieldMetadata, a as buildFieldSearch, S as SHORTCUT_SEARCH_FIELD, f as focusOnFieldSerch, c as SEARCH_FIELD_FULL_WIDTH, D as DataBinder } from './search-column-9414ad22.js';
-import { g as getI18n, i as initI18n } from './index-b5a15d4b.js';
-import { F as FormLayout } from './FormLayout-bda67973.js';
-import './ApplicationUtils-29d2709c.js';
+import { b as buildFieldMetadata, a as buildFieldSearch, S as SHORTCUT_SEARCH_FIELD, f as focusOnFieldSerch, c as SEARCH_FIELD_FULL_WIDTH, D as DataBinder } from './search-column-c20d2b01.js';
+import { g as getI18n, i as initI18n } from './index-41363fa6.js';
+import { F as FormLayout } from './FormLayout-071d324c.js';
+import './ApplicationUtils-1569f757.js';
 import './DialogType-54a62731.js';
 import './CheckMode-bdb2ec19.js';
-import './types-6f6b2650.js';
 
 const DETAIL_PATTERN = /child\[([^\]]+)\]/;
 const REGEX_DEFAULT_VAR_KEY = /\$\{.+\}/;
@@ -79,127 +78,11 @@ const buildFormConfigFromDataUnit = (dataUnit) => {
       .filter(descriptor => descriptor.visible !== false)
       .map(descriptor => { return { name: descriptor.name, defaultValue: descriptor.defaultValue }; });
   }
-  return { emptyConfig: false, fields };
+  const config = { emptyConfig: false, fields };
+  return config;
 };
-function handleDetailTabs(dataUnit, config, sheets) {
-  const unitMD = dataUnit.metadata;
-  if (unitMD === undefined || unitMD.children === undefined)
-    return;
-  unitMD.children.forEach((child) => {
-    const tabConfig = getTabFromConfig(child.label, config);
-    if (tabConfig) {
-      sheets.set(Object.assign(tabConfig, { name: buildChildName(child), isDetail: true }), []);
-      return;
-    }
-    const { label, name, fields } = buildDetailSheet(child);
-    sheets.set({ name, label, isDetail: true }, fields);
-  });
-}
-function handleCustomTabs(customGuides, config, sheets) {
-  customGuides.forEach((guide) => {
-    const tabConfig = getTabFromConfig(guide.label, config);
-    const ctxProps = {};
-    Object.entries(guide).forEach(([key, value]) => {
-      if (!isReservedKey(key)) {
-        ctxProps[key] = value;
-      }
-    });
-    if (tabConfig) {
-      sheets.set(Object.assign(tabConfig, { name: guide.id, isCustom: true, ctxProps }), []);
-      return;
-    }
-    const sheet = { label: guide.label, name: guide.id, isCustom: true, visible: true, ctxProps };
-    sheets.set(sheet, []);
-  });
-}
-function isReservedKey(key) {
-  return ['id', 'label'].includes(key);
-}
-function parseTabToFormSheet(key, fields) {
-  const i18n = getI18n();
-  return {
-    label: (key.label === "__main") ? i18n("ez-form.mainTab") : key.label,
-    name: key.name || key.label,
-    isCustom: key.isCustom,
-    isDetail: key.isDetail,
-    ctxProps: key.ctxProps,
-    fields
-  };
-}
-function handleFields(config, sheets, hiddenTabs, dataUnit, requiredFields, cleanOnCopyFields, defaultValues) {
-  var _a;
-  (_a = config === null || config === void 0 ? void 0 : config.fields) === null || _a === void 0 ? void 0 : _a.forEach((field) => {
-    var _a, _b, _c, _d, _e, _f;
-    if (field.visible === false) {
-      return;
-    }
-    if (!field.tab && ((_b = (_a = dataUnit.getField(field.name)) === null || _a === void 0 ? void 0 : _a.properties) === null || _b === void 0 ? void 0 : _b.isPrimaryKey)) {
-      field.tab = "__main";
-    }
-    const tabConfig = getTabConfig(field.tab || "Geral", sheets, config);
-    if (hiddenTabs.has(tabConfig.label)) {
-      return;
-    }
-    const descriptor = dataUnit.getField(field.name);
-    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, []);
-      }
-      const formField = buildFieldMetadata(descriptor, field);
-      (_c = sheets.get(tabConfig)) === null || _c === void 0 ? void 0 : _c.push(formField);
-      if (formField.required) {
-        requiredFields.push(field.name);
-      }
-      const cleanOnCopy = field.cleanOnCopy == undefined ? (_d = descriptor.properties) === null || _d === void 0 ? void 0 : _d.cleanOnCopy : field.cleanOnCopy;
-      if (cleanOnCopy || ((_e = descriptor.properties) === null || _e === void 0 ? void 0 : _e.cleanOnCopy)) {
-        cleanOnCopyFields.push(field.name);
-      }
-      let defaultValue = field.defaultValue == undefined ? (_f = descriptor.properties) === null || _f === void 0 ? void 0 : _f.defaultValue : field.defaultValue;
-      if (defaultValue && defaultValue.value != undefined) {
-        const { type, value } = defaultValue;
-        if (type) {
-          if (type === "V") {
-            defaultValue = value;
-          }
-          else {
-            try {
-              const parsed = JSON.parse(value);
-              if (parsed && "value" in parsed) {
-                defaultValue = parsed;
-              }
-              else {
-                defaultValue = value;
-              }
-            }
-            catch (_g) {
-            }
-          }
-        }
-        defaultValues[field.name] = defaultValue;
-      }
-    }
-  });
-}
-function getDistinctTabs(config) {
+const buildFormMetadata = (config, dataUnit, includeDetails = false) => {
   var _a, _b;
-  const fieldTabs = (_b = (_a = config.fields) === null || _a === void 0 ? void 0 : _a.map((field, index) => ({
-    label: field.tab,
-    name: field.tab,
-    order: index,
-    visible: true,
-    isDetail: false,
-    isCustom: false,
-  }))) !== null && _b !== void 0 ? _b : [];
-  return fieldTabs.reduce((total, item) => {
-    if (!total.some((tab) => tab.name === item.name)) {
-      return [...total, item];
-    }
-    return total;
-  }, []);
-}
-const buildFormMetadata = (config, dataUnit, includeDetails = false, customGuides) => {
-  var _a;
   if (config == undefined || (config === null || config === void 0 ? void 0 : config.emptyConfig) === true) {
     config = buildFormConfigFromDataUnit(dataUnit);
   }
@@ -208,27 +91,86 @@ const buildFormMetadata = (config, dataUnit, includeDetails = false, customGuide
   const requiredFields = [];
   const cleanOnCopyFields = [];
   const defaultValues = {};
-  const tabs = (_a = config === null || config === void 0 ? void 0 : config.tabs) !== null && _a !== void 0 ? _a : getDistinctTabs(config);
-  tabs.forEach((tab) => {
+  (_a = config === null || config === void 0 ? void 0 : config.tabs) === null || _a === void 0 ? void 0 : _a.forEach((tab) => {
     if (!hiddenTabs.has(tab.label) && tab.visible === false) {
       hiddenTabs.set(tab.label, tab);
     }
   });
-  handleFields(config, sheets, hiddenTabs, dataUnit, requiredFields, cleanOnCopyFields, defaultValues);
+  (_b = config === null || config === void 0 ? void 0 : config.fields) === null || _b === void 0 ? void 0 : _b.forEach((field) => {
+    var _a, _b, _c;
+    if (field.visible !== false) {
+      const tabConfig = getTabConfig(field.tab || "__main", sheets, config);
+      if (hiddenTabs.has(tabConfig.label)) {
+        return;
+      }
+      const descriptor = dataUnit.getField(field.name);
+      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, []);
+        }
+        const formField = buildFieldMetadata(descriptor, field);
+        sheets.get(tabConfig).push(formField);
+        if (formField.required) {
+          requiredFields.push(field.name);
+        }
+        const cleanOnCopy = field.cleanOnCopy == undefined ? (_a = descriptor.properties) === null || _a === void 0 ? void 0 : _a.cleanOnCopy : field.cleanOnCopy;
+        if (cleanOnCopy || ((_b = descriptor.properties) === null || _b === void 0 ? void 0 : _b.cleanOnCopy)) {
+          cleanOnCopyFields.push(field.name);
+        }
+        let defaultValue = field.defaultValue == undefined ? (_c = descriptor.properties) === null || _c === void 0 ? void 0 : _c.defaultValue : field.defaultValue;
+        if (defaultValue && defaultValue.value != undefined) {
+          const { type, value } = defaultValue;
+          if (type) {
+            if (type === "V") {
+              defaultValue = value;
+            }
+            else {
+              try {
+                const parsed = JSON.parse(value);
+                if (parsed && "value" in parsed) {
+                  defaultValue = parsed;
+                }
+                else {
+                  defaultValue = value;
+                }
+              }
+              catch (_d) { }
+            }
+          }
+          defaultValues[field.name] = defaultValue;
+        }
+      }
+    }
+  });
   const metadata = new FormMetadata();
   metadata.setDefaultVars(config.defaultVars);
   if (includeDetails) {
-    handleDetailTabs(dataUnit, config, sheets);
-  }
-  if (customGuides) {
-    handleCustomTabs(customGuides, config, sheets);
+    const unitMD = dataUnit.metadata;
+    if (unitMD != undefined && unitMD.children != undefined) {
+      unitMD.children.forEach((child) => {
+        if (hiddenTabs.has(child.label)) {
+          return;
+        }
+        const tabConfig = getTabFromConfig(child.label, config);
+        if (tabConfig) {
+          sheets.set(Object.assign(tabConfig, { name: buildChildName(child) }), []);
+          return;
+        }
+        const { label, name, fields } = buildDetailSheet(child);
+        sheets.set({ name, label }, fields);
+      });
+    }
   }
+  const i18n = getI18n();
   Array.from(sheets.entries())
     .sort(sortTabs)
-    .forEach(([tab, fields]) => {
-    if (!hiddenTabs.has(tab.label)) {
-      metadata.addSheet(parseTabToFormSheet(tab, fields));
-    }
+    .forEach(([key, fields]) => {
+    metadata.addSheet({
+      label: (key.label === "__main") ? i18n("ez-form.mainTab") : key.label,
+      name: key.name || key.label,
+      fields
+    });
   });
   metadata.addRequiredFields(requiredFields);
   metadata.addCleanOnCopyFields(cleanOnCopyFields);
@@ -240,8 +182,7 @@ const getTabFromConfig = (tab, config) => {
   if (!config) {
     return;
   }
-  const tabs = (_a = config === null || config === void 0 ? void 0 : config.tabs) !== null && _a !== void 0 ? _a : getDistinctTabs(config);
-  return tabs === null || tabs === void 0 ? void 0 : tabs.find(t => t.label === tab);
+  return (_a = config.tabs) === null || _a === void 0 ? void 0 : _a.find(t => t.label === tab);
 };
 const getTabConfig = (tab, sheets, config) => {
   if (typeof tab !== "string") {
@@ -663,7 +604,6 @@ const EzForm = class {
     };
     this._fieldsProps = new Map();
     this._singleColumn = false;
-    this._formLayout = undefined;
     this.dataUnit = undefined;
     this.config = undefined;
     this.recordsValidator = undefined;
@@ -671,7 +611,6 @@ const EzForm = class {
     this.onlyStaticFields = false;
     this.useSearchField = true;
     this.elementFocusSearchField = undefined;
-    this.customUiBuilders = new Map();
   }
   /**
    * Realiza validação no conteúdo de todos os campos.
@@ -729,7 +668,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 ez-box--no-outline", "data-element-id": idFormSheet, ref: elem => (this._container = elem), tabindex: "0" }, h("ez-popover", { ref: elem => (this._ezPopoverSearchField = elem), overlayType: "none" }, this.renderFieldColumn()), 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 })));
+    return (h("div", { class: "dynamic-content ez-box--no-outline", "data-element-id": idFormSheet, ref: elem => (this._container = elem), tabindex: "0" }, h("ez-popover", { ref: elem => (this._ezPopoverSearchField = elem), overlayType: "none" }, this.renderFieldColumn()), 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() })));
   }
   renderFieldColumn() {
     if (this._fieldSearch != undefined) {
@@ -813,20 +752,18 @@ const EzForm = class {
     this._i18n = await initI18n();
   }
   async setSingleColumn(layoutFormConfig) {
-    this._singleColumn = (layoutFormConfig === null || layoutFormConfig === void 0 ? void 0 : layoutFormConfig.config) === FormLayout.CASCADE || (layoutFormConfig === null || layoutFormConfig === void 0 ? void 0 : layoutFormConfig.config) === FormLayout.CLASSIC_CASCADE;
-    this._formLayout = layoutFormConfig === null || layoutFormConfig === void 0 ? void 0 : layoutFormConfig.config;
+    this._singleColumn = (layoutFormConfig === null || layoutFormConfig === void 0 ? void 0 : layoutFormConfig.config) === FormLayout.CASCADE;
   }
   async registerNotifyListeners(layoutFormConfig) {
     if (!layoutFormConfig)
       return;
     layoutFormConfig.onConfigChange((config) => {
-      if (config === FormLayout.CASCADE || config === FormLayout.CLASSIC_CASCADE) {
+      if (config === FormLayout.CASCADE) {
         this._singleColumn = true;
       }
       else {
         this._singleColumn = false;
       }
-      this._formLayout = config;
     });
   }
   componentDidRender() {