@sankhyalabs/ezui 2.14.0-develop.1 → 2.14.1

package/dist/custom-elements/index.js

@@ -1,6 +1,6 @@
 import { HTMLElement as HTMLElement$1, createEvent, h, Host, forceUpdate, proxyCustomElement } from '@stencil/core/internal/client';
 export { setAssetPath, setPlatformOptions } from '@stencil/core/internal/client';
-import { FloatingManager, ElementIDUtils, StringUtils as StringUtils$1, DateUtils as DateUtils$1, TimeFormatter, ObjectUtils as ObjectUtils$1, UserInterface, Action, WaitingChangeException, ApplicationContext, DataUnitAction, DataUnit, NumberUtils as NumberUtils$1, DataType, SortMode, JSUtils, MaskFormatter } from '@sankhyalabs/core';
+import { FloatingManager, ElementIDUtils, StringUtils as StringUtils$1, DateUtils as DateUtils$1, TimeFormatter, ObjectUtils as ObjectUtils$1, Action, WaitingChangeException, ApplicationContext, UserInterface, DataUnitAction, DataUnit, NumberUtils as NumberUtils$1, DataType, SortMode, JSUtils, MaskFormatter } from '@sankhyalabs/core';
 
 var DialogType;
 (function (DialogType) {
@@ -2714,284 +2714,6 @@ let EzFilterInput$1 = class extends HTMLElement$1 {
   static get style() { return ezFilterInputCss; }
 };
 
-class FormMetadata {
-  constructor() {
-    this._sheets = new Map();
-    this._requiredFields = [];
-    this._cleanOnCopyFields = [];
-    this._defaultValues = {};
-  }
-  getSheet(name) {
-    return this._sheets.get(name);
-  }
-  getAllSheets() {
-    return this._sheets;
-  }
-  addSheet(sheet) {
-    this._sheets.set(sheet.name, sheet);
-    this._requiredFields = this._requiredFields.concat(sheet.requiredFields);
-    this._cleanOnCopyFields = this._cleanOnCopyFields.concat(sheet.cleanOnCopyFields);
-    this._defaultValues = sheet.defaultValues;
-  }
-  getRequiredFields() {
-    return this._requiredFields;
-  }
-  getCleanOnCopyFields() {
-    return this._cleanOnCopyFields;
-  }
-  getDefaultValues() {
-    return this._defaultValues;
-  }
-}
-const isRequiredField = (descriptor, config) => {
-  if (descriptor.required) {
-    //Se for required pelo descritor não olha pra configuração.
-    return true;
-  }
-  return config === null || config === void 0 ? void 0 : config.required;
-};
-const isReadOnlyField = (descriptor, config) => {
-  if (descriptor.readOnly) {
-    //Se for readOnly pelo descritor não olha pra configuração.
-    return true;
-  }
-  return config === null || config === void 0 ? void 0 : config.readOnly;
-};
-const buildFromDataUnit = (dataUnit) => {
-  var _a, _b;
-  const unitMD = dataUnit.metadata;
-  const metadata = new FormMetadata();
-  if (unitMD) {
-    const visibleFields = (_a = unitMD.fields) === null || _a === void 0 ? void 0 : _a.filter(descriptor => descriptor.visible !== false);
-    const items = new Map();
-    (_b = unitMD === null || unitMD === void 0 ? void 0 : unitMD.fields) === null || _b === void 0 ? void 0 : _b.forEach((descriptor) => {
-      if (descriptor.visible !== false) {
-        resolveFieldGroup(items, null, descriptor);
-      }
-    });
-    let defaultValues = {};
-    visibleFields
-      .filter(descriptor => descriptor.defaultValue)
-      .forEach((descriptor) => defaultValues[descriptor.name] = descriptor.defaultValue);
-    metadata.addSheet({
-      label: unitMD.label,
-      name: unitMD.name,
-      items: Array.from(items.values()),
-      requiredFields: visibleFields
-        .filter(descriptor => descriptor.required)
-        .map(descriptor => descriptor.name),
-      cleanOnCopyFields: visibleFields
-        .filter(descriptor => { var _a, _b; return ((_a = descriptor.properties) === null || _a === void 0 ? void 0 : _a.cleanOnCopy) || ((_b = descriptor.properties) === null || _b === void 0 ? void 0 : _b.autoNum); })
-        .map(descriptor => descriptor.name),
-      defaultValues
-    });
-  }
-  return metadata;
-};
-function getTabConfig(tab, sheets) {
-  const tabConfig = (typeof tab === "string" ? Array.from(sheets.keys()).find(t => t.label === tab) : tab);
-  return tabConfig || { label: tab, visible: true };
-}
-function sortTabs(a, b) {
-  return a[0].label == '__main' ? -1 : (a[0].order || 10000) - (b[0].order || 10000);
-}
-function resolveFieldGroup(items, field, descriptor) {
-  const fieldMD = { config: field, descriptor: descriptor };
-  let group = (field === null || field === void 0 ? void 0 : field.group) || descriptor.group;
-  if (group) {
-    const key = `group::${group}`;
-    if (!items.has(key)) {
-      items.set(key, { label: group, items: [fieldMD] });
-    }
-    else {
-      items.get(key).items.push(fieldMD);
-    }
-  }
-  else {
-    items.set((field === null || field === void 0 ? void 0 : field.name) || descriptor.name, fieldMD);
-  }
-}
-const buildFromConfig = (config, dataUnit) => {
-  var _a, _b;
-  const sheets = new Map();
-  const hiddenTabs = new Map();
-  const requiredFields = [];
-  const cleanOnCopyFields = [];
-  const defaultValues = {};
-  (_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);
-    }
-  });
-  (_b = config === null || config === void 0 ? void 0 : config.fields) === null || _b === void 0 ? void 0 : _b.forEach((field) => {
-    var _a, _b, _c, _d;
-    if (field.visible !== false) {
-      const tabConfig = getTabConfig(field.tab || "__main", sheets);
-      if (hiddenTabs.has(tabConfig.label)) {
-        return;
-      }
-      const descriptor = dataUnit.getField(field.name);
-      if (descriptor && tabConfig.visible) {
-        if (!sheets.has(tabConfig)) {
-          sheets.set(tabConfig, new Map());
-        }
-        const tabItens = sheets.get(tabConfig);
-        if (isRequiredField(descriptor, field)) {
-          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.autoNum) || ((_c = descriptor.properties) === null || _c === void 0 ? void 0 : _c.cleanOnCopy)) {
-          cleanOnCopyFields.push(field.name);
-        }
-        const defaultValue = field.defaultValue == undefined ? (_d = descriptor.properties) === null || _d === void 0 ? void 0 : _d.defaultValue : field.defaultValue;
-        if (defaultValue) {
-          defaultValues[field.name] = field.defaultValue;
-        }
-        resolveFieldGroup(tabItens, field, descriptor);
-      }
-    }
-  });
-  const metadata = new FormMetadata();
-  Array.from(sheets.entries())
-    .sort(sortTabs)
-    .forEach(([key, value]) => {
-    metadata.addSheet({
-      label: (key.label === "__main") ? "Principal" : key.label,
-      name: key.label,
-      items: Array.from(value.values()),
-      requiredFields,
-      cleanOnCopyFields,
-      defaultValues
-    });
-  });
-  return metadata;
-};
-
-const buildTextArea = ({ name, label, readOnly }) => {
-  return (h("div", { class: "ez-col ez-col--sd-12 ez-padding-horizontal--small", key: name },
-    h("ez-text-area", { enabled: !readOnly, label: label, "data-field-name": name })));
-};
-
-const buildTextInput = ({ name, label, readOnly }) => {
-  return (h("div", { class: "ez-col ez-col--sd-12 ez-col--tb-3 ez-padding-horizontal--small" },
-    h("ez-text-input", { label: label, "data-field-name": name, key: name, enabled: !readOnly })));
-};
-
-const buildSwitch = (fieldConfig) => {
-  return buildField$1(fieldConfig.name, fieldConfig.label, fieldConfig.readOnly, true);
-};
-const buildCheckBox = (fieldConfig) => {
-  return buildField$1(fieldConfig.name, fieldConfig.label, fieldConfig.readOnly, false);
-};
-function buildField$1(fieldName, fieldLabel, readOnly, switchMode = false) {
-  return (h("div", { class: "ez-col ez-col--sd-12 ez-col--tb-3 ez-align--middle ez-padding-horizontal--small ez-padding-bottom--large" },
-    h("ez-check", { enabled: !readOnly, label: fieldLabel, mode: switchMode ? CheckMode.SWITCH : CheckMode.REGULAR, "data-field-name": fieldName, key: fieldName })));
-}
-
-const buildComboBox = ({ name, label, readOnly, required }, properties) => {
-  const prop = properties === null || properties === void 0 ? void 0 : properties.options;
-  let options;
-  if (typeof prop === "string") {
-    const parsed = JSON.parse(prop);
-    options = Object.keys(parsed).map(key => { return { value: key, label: parsed[key] }; });
-  }
-  else {
-    options = prop;
-  }
-  return (h("div", { class: "ez-col ez-col--sd-12 ez-col--tb-3 ez-padding-horizontal--small" },
-    h("ez-combo-box", { enabled: !readOnly, suppressEmptyOption: required, label: label, "data-field-name": name, key: name, options: options })));
-};
-
-const buildSearch = ({ name, label, readOnly, required }) => {
-  return (h("div", { class: "ez-col ez-col--sd-12 ez-col--tb-3 ez-padding-horizontal--small" },
-    h("ez-search", { enabled: !readOnly, suppressEmptyOption: required, label: label, "data-field-name": name, key: name })));
-};
-
-const buildFile = ({ name, label, readOnly }) => {
-  return (h("div", { class: "ez-col ez-col--sd-12 ez-padding-horizontal--small" },
-    h("ez-upload", { enabled: !readOnly, label: label, "data-field-name": name, key: name })));
-};
-
-const buildDate = ({ name, label, readOnly }) => {
-  return (h("div", { class: "ez-col ez-col--sd-12 ez-col--tb-3 ez-padding-horizontal--small" },
-    h("ez-date-input", { enabled: !readOnly, label: label, "data-field-name": name, key: name })));
-};
-const buildTime = ({ name, label, readOnly }) => {
-  return (h("div", { class: "ez-col ez-col--sd-12 ez-col--tb-3 ez-padding-horizontal--small" },
-    h("ez-time-input", { enabled: !readOnly, label: label, "data-field-name": name, key: name })));
-};
-const buildTimeDate = ({ name, label, readOnly }) => {
-  return (h("div", { class: "ez-col ez-col--sd-12 ez-col--tb-3 ez-padding-horizontal--small" },
-    h("ez-date-time-input", { enabled: !readOnly, label: label, "data-field-name": name, key: name })));
-};
-
-const buildDecimal = ({ name, label, readOnly }, properties) => {
-  const precision = Number((properties === null || properties === void 0 ? void 0 : properties.precision) || 2);
-  const prettyPrecision = Number((properties === null || properties === void 0 ? void 0 : properties.prettyPrecision) || precision);
-  return buildNumeric(name, label, readOnly, precision, prettyPrecision);
-};
-const buildInteger = ({ name, label, readOnly }) => {
-  return buildNumeric(name, label, readOnly, 0, 0);
-};
-function buildNumeric(fieldName, fieldLabel, readOnly, precision, prettyPrecision) {
-  return (h("div", { class: "ez-col ez-col--sd-12 ez-col--tb-3 ez-padding-horizontal--small" },
-    h("ez-number-input", { enabled: !readOnly, label: fieldLabel, precision: precision, prettyPrecision: prettyPrecision, "data-field-name": fieldName, key: fieldName })));
-}
-
-const uiBuilders = new Map();
-uiBuilders.set(UserInterface.LONGTEXT, buildTextArea);
-uiBuilders.set(UserInterface.CHECKBOX, buildCheckBox);
-uiBuilders.set(UserInterface.SWITCH, buildSwitch);
-uiBuilders.set(UserInterface.OPTIONSELECTOR, buildComboBox);
-uiBuilders.set(UserInterface.SEARCH, buildSearch);
-uiBuilders.set(UserInterface.FILE, buildFile);
-uiBuilders.set(UserInterface.DATE, buildDate);
-uiBuilders.set(UserInterface.TIME, buildTime);
-uiBuilders.set(UserInterface.DATETIME, buildTimeDate);
-uiBuilders.set(UserInterface.DECIMALNUMBER, buildDecimal);
-uiBuilders.set(UserInterface.INTEGERNUMBER, buildInteger);
-const buildField = (field) => {
-  const descriptor = field.descriptor;
-  const config = Object.assign({}, field.config);
-  let builder;
-  let props;
-  if (descriptor) {
-    if (!config.label) {
-      config.label = descriptor.label;
-    }
-    if (!config.name) {
-      config.name = descriptor.name;
-    }
-    // Forçamos uma avaliação priorizando o descriptor.
-    config.required = isRequiredField(descriptor, config);
-    config.readOnly = isReadOnlyField(descriptor, config);
-    props = descriptor.properties;
-    builder = uiBuilders.get(descriptor.userInterface);
-  }
-  if (config.required) {
-    config.label = `${config.label} (obrigatório) *`;
-  }
-  if (!builder) {
-    builder = buildTextInput;
-  }
-  return builder(config, props);
-};
-
-const FormItem = ({ source }) => {
-  if ("items" in source) {
-    const fieldSet = source;
-    return h("ez-collapsible-box", { label: source.label, "header-size": "large", key: source.label }, fieldSet.items.map(fi => buildField(fi)));
-  }
-  else {
-    return buildField(source);
-  }
-};
-
-const FormSheet = ({ store, source, dataElementId }) => {
-  return (h("div", { class: "dynamic-content ez-box__container", "data-element-id": dataElementId },
-    h("div", { class: "ez-row ez-padding-vertical--small" }, source.items.map(item => h(FormItem, { store: store, source: item })))));
-};
-
 /**
  * Adapted from React: https://github.com/facebook/react/blob/master/packages/shared/formatProdErrorMessage.js
  *
@@ -3315,49 +3037,6 @@ function createStore(reducer, preloadedState, enhancer) {
   }, _ref2[$$observable] = observable, _ref2;
 }
 
-const inicialState = {};
-///////////////////////////////     REDUCERS     ///////////////////////////////
-function formReducer(state = inicialState, action) {
-  switch (action.type) {
-    case FormActions.METADATA_LOADED:
-      return Object.assign(Object.assign({}, state), { formMetadata: action.payload, currentSheet: undefined });
-    case FormActions.CHANGE_TAB:
-      return Object.assign(Object.assign({}, state), { currentSheet: action.payload });
-    default:
-      return state;
-  }
-}
-/////////////////////////////// ACTION CREATORS ///////////////////////////////
-function loadMetadata(formMetadata) {
-  return {
-    type: FormActions.METADATA_LOADED,
-    payload: formMetadata
-  };
-}
-function changeTab(currentSheet) {
-  return {
-    type: FormActions.CHANGE_TAB,
-    payload: typeof currentSheet === "string" ? currentSheet : currentSheet.tabKey
-  };
-}
-///////////////////////////////    SELECTORS    ///////////////////////////////
-function selectFormMetadata(state) {
-  return state.formMetadata;
-}
-function selectCurrentSheetId(state) {
-  return state.currentSheet;
-}
-function selectCurrentSheet(state) {
-  const currentSheetId = selectCurrentSheetId(state);
-  return currentSheetId ? state.formMetadata.getSheet(currentSheetId) : Array.from(state.formMetadata.getAllSheets().values())[0];
-}
-///////////////////////////////      TYPES      ///////////////////////////////
-var FormActions;
-(function (FormActions) {
-  FormActions["METADATA_LOADED"] = "FORM/METADATA_LOADED";
-  FormActions["CHANGE_TAB"] = "FORM/CHANGE_TAB";
-})(FormActions || (FormActions = {}));
-
 class DataBinder {
   constructor(dataUnit) {
     this._invalidFields = new Map();
@@ -3564,7 +3243,187 @@ class Bind {
   }
 }
 
-const ezFormCss = "ez-form.sc-ez-form{display:flex;flex-direction:column;width:100%}.dynamic-content.sc-ez-form ez-collapsible-box.sc-ez-form{--ez-collapsible-box__header--padding-right:var(--space-small, 6px);--ez-collapsible-box__header--padding-left:var(--space-small, 6px)}.multi-level__container.sc-ez-form{display:grid;grid-template-columns:minmax(20%, 300px) auto;width:100%}";
+const inicialState = {};
+///////////////////////////////     REDUCERS     ///////////////////////////////
+function formReducer(state = inicialState, action) {
+  switch (action.type) {
+    case FormActions.METADATA_LOADED:
+      return Object.assign(Object.assign({}, state), { formMetadata: action.payload, currentSheet: undefined });
+    case FormActions.CHANGE_TAB:
+      return Object.assign(Object.assign({}, state), { currentSheet: action.payload });
+    default:
+      return state;
+  }
+}
+/////////////////////////////// ACTION CREATORS ///////////////////////////////
+function loadMetadata(formMetadata) {
+  return {
+    type: FormActions.METADATA_LOADED,
+    payload: formMetadata
+  };
+}
+function changeTab(currentSheet) {
+  return {
+    type: FormActions.CHANGE_TAB,
+    payload: typeof currentSheet === "string" ? currentSheet : currentSheet.tabKey
+  };
+}
+///////////////////////////////    SELECTORS    ///////////////////////////////
+function selectFormMetadata(state) {
+  return state.formMetadata;
+}
+function selectCurrentSheetId(state) {
+  return state.currentSheet;
+}
+function selectCurrentSheet(state) {
+  const currentSheetId = selectCurrentSheetId(state);
+  return currentSheetId ? state.formMetadata.getSheet(currentSheetId) : Array.from(state.formMetadata.getAllSheets().values())[0];
+}
+///////////////////////////////      TYPES      ///////////////////////////////
+var FormActions;
+(function (FormActions) {
+  FormActions["METADATA_LOADED"] = "FORM/METADATA_LOADED";
+  FormActions["CHANGE_TAB"] = "FORM/CHANGE_TAB";
+})(FormActions || (FormActions = {}));
+
+class FormMetadata {
+  constructor() {
+    this._sheets = new Map();
+    this._requiredFields = [];
+    this._cleanOnCopyFields = [];
+    this._defaultValues = {};
+  }
+  getSheet(name) {
+    return this._sheets.get(name);
+  }
+  getAllSheets() {
+    return this._sheets;
+  }
+  addSheet(sheet) {
+    this._sheets.set(sheet.name, sheet);
+    this._requiredFields = this._requiredFields.concat(sheet.requiredFields);
+    this._cleanOnCopyFields = this._cleanOnCopyFields.concat(sheet.cleanOnCopyFields);
+    this._defaultValues = sheet.defaultValues;
+  }
+  getRequiredFields() {
+    return this._requiredFields;
+  }
+  getCleanOnCopyFields() {
+    return this._cleanOnCopyFields;
+  }
+  getDefaultValues() {
+    return this._defaultValues;
+  }
+}
+const buildFromDataUnit = (dataUnit) => {
+  const unitMD = dataUnit.metadata;
+  const metadata = new FormMetadata();
+  if (unitMD) {
+    const visibleFields = (unitMD.fields || []).filter(descriptor => descriptor.visible !== false);
+    const fields = visibleFields.map(descriptor => buildFormField(descriptor));
+    let defaultValues = {};
+    visibleFields
+      .filter(descriptor => descriptor.defaultValue)
+      .forEach((descriptor) => defaultValues[descriptor.name] = descriptor.defaultValue);
+    metadata.addSheet({
+      name: unitMD.name,
+      label: unitMD.label,
+      fields,
+      requiredFields: visibleFields
+        .filter(descriptor => descriptor.required)
+        .map(descriptor => descriptor.name),
+      cleanOnCopyFields: visibleFields
+        .filter(descriptor => { var _a, _b; return ((_a = descriptor.properties) === null || _a === void 0 ? void 0 : _a.cleanOnCopy) || ((_b = descriptor.properties) === null || _b === void 0 ? void 0 : _b.autoNum); })
+        .map(descriptor => descriptor.name),
+      defaultValues
+    });
+  }
+  return metadata;
+};
+const buildFromConfig = (config, dataUnit) => {
+  var _a, _b;
+  const sheets = new Map();
+  const hiddenTabs = new Map();
+  const requiredFields = [];
+  const cleanOnCopyFields = [];
+  const defaultValues = {};
+  (_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);
+    }
+  });
+  (_b = config === null || config === void 0 ? void 0 : config.fields) === null || _b === void 0 ? void 0 : _b.forEach((field) => {
+    var _a, _b, _c, _d;
+    if (field.visible !== false) {
+      const tabConfig = getTabConfig(field.tab || "__main", sheets);
+      if (hiddenTabs.has(tabConfig.label)) {
+        return;
+      }
+      const descriptor = dataUnit.getField(field.name);
+      if (descriptor && tabConfig.visible) {
+        if (!sheets.has(tabConfig)) {
+          sheets.set(tabConfig, []);
+        }
+        const formField = buildFormField(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.autoNum) || ((_c = descriptor.properties) === null || _c === void 0 ? void 0 : _c.cleanOnCopy)) {
+          cleanOnCopyFields.push(field.name);
+        }
+        const defaultValue = field.defaultValue == undefined ? (_d = descriptor.properties) === null || _d === void 0 ? void 0 : _d.defaultValue : field.defaultValue;
+        if (defaultValue) {
+          defaultValues[field.name] = field.defaultValue;
+        }
+      }
+    }
+  });
+  const metadata = new FormMetadata();
+  Array.from(sheets.entries())
+    .sort(sortTabs)
+    .forEach(([key, fields]) => {
+    metadata.addSheet({
+      label: (key.label === "__main") ? "Principal" : key.label,
+      name: key.label,
+      fields,
+      requiredFields,
+      cleanOnCopyFields,
+      defaultValues
+    });
+  });
+  return metadata;
+};
+const buildFormField = (descriptor, config) => {
+  let { name, label, group } = Object.assign({}, config);
+  let { readOnly, required } = Object.assign({}, config);
+  let props;
+  let userInterface;
+  if (descriptor) {
+    label = label || descriptor.label;
+    name = name || descriptor.name;
+    required = descriptor.required || (config === null || config === void 0 ? void 0 : config.required);
+    readOnly = descriptor.readOnly || (config === null || config === void 0 ? void 0 : config.readOnly);
+    props = descriptor.properties;
+    userInterface = descriptor.userInterface;
+  }
+  return {
+    name, label, group,
+    readOnly, required,
+    props,
+    userInterface: userInterface || UserInterface.SHORTTEXT
+  };
+};
+const getTabConfig = (tab, sheets) => {
+  const tabConfig = (typeof tab === "string" ? Array.from(sheets.keys()).find(t => t.label === tab) : tab);
+  return tabConfig || { label: tab, visible: true };
+};
+const sortTabs = (a, b) => {
+  return a[0].label == '__main' ? -1 : (a[0].order || 10000) - (b[0].order || 10000);
+};
+
+const ezFormCss = ".sc-ez-form-h{display:flex;flex-direction:column;width:100%}.dynamic-content.sc-ez-form ez-collapsible-box.sc-ez-form{--ez-collapsible-box__header--padding-right:var(--space-small, 6px);--ez-collapsible-box__header--padding-left:var(--space-small, 6px)}.multi-level__container.sc-ez-form{display:grid;grid-template-columns:minmax(20%, 300px) auto;width:100%}";
 
 let EzForm$1 = class extends HTMLElement$1 {
   constructor() {
@@ -3693,8 +3552,9 @@ let EzForm$1 = class extends HTMLElement$1 {
     return result;
   }
   buildFormContent(sheetId, currentSheet) {
+    const fields = currentSheet === null || currentSheet === void 0 ? void 0 : currentSheet.fields;
     if (this.contentBuilder != undefined) {
-      const customContent = this.contentBuilder(sheetId, currentSheet === null || currentSheet === void 0 ? void 0 : currentSheet.items, buildField);
+      const customContent = this.contentBuilder(sheetId, fields);
       if (customContent != undefined) {
         return h("div", { "innerHTML": customContent });
       }
@@ -3703,7 +3563,7 @@ let EzForm$1 = class extends HTMLElement$1 {
       return;
     }
     const idFormSheet = `${StringUtils$1.replaceAccentuatedChars(StringUtils$1.toCamelCase(currentSheet === null || currentSheet === void 0 ? void 0 : currentSheet.label), false)}_selectorContainer`;
-    return h(FormSheet, { store: this._store, source: currentSheet, dataElementId: idFormSheet });
+    return (h("div", { class: "dynamic-content ez-box__container", "data-element-id": idFormSheet }, h("ez-form-view", { class: "ez-row ez-padding-vertical--small", fields: fields })));
   }
   processMetadata() {
     if (!this.isStatic() && this.dataUnit && this._store) {
@@ -3801,6 +3661,138 @@ let EzForm$1 = class extends HTMLElement$1 {
   static get style() { return ezFormCss; }
 };
 
+const buildSwitch = (field) => {
+  return buildField(field.name, field.label, field.readOnly, true);
+};
+const buildCheckBox = (field) => {
+  return buildField(field.name, field.label, field.readOnly, false);
+};
+function buildField(fieldName, fieldLabel, readOnly, switchMode = false) {
+  return (h("div", { class: "ez-col ez-col--sd-12 ez-col--tb-3 ez-align--middle ez-padding-horizontal--small ez-padding-bottom--large" },
+    h("ez-check", { enabled: !readOnly, label: fieldLabel, mode: switchMode ? CheckMode.SWITCH : CheckMode.REGULAR, "data-field-name": fieldName, key: fieldName })));
+}
+
+const buildComboBox = ({ name, label, readOnly, required, props }) => {
+  const prop = props === null || props === void 0 ? void 0 : props.options;
+  let options;
+  if (typeof prop === "string") {
+    const parsed = JSON.parse(prop);
+    options = Object.keys(parsed).map(key => { return { value: key, label: parsed[key] }; });
+  }
+  else {
+    options = prop;
+  }
+  return (h("div", { class: "ez-col ez-col--sd-12 ez-col--tb-3 ez-padding-horizontal--small" },
+    h("ez-combo-box", { enabled: !readOnly, suppressEmptyOption: required, label: label, "data-field-name": name, key: name, options: options })));
+};
+
+const buildDate = ({ name, label, readOnly }) => {
+  return (h("div", { class: "ez-col ez-col--sd-12 ez-col--tb-3 ez-padding-horizontal--small" },
+    h("ez-date-input", { enabled: !readOnly, label: label, "data-field-name": name, key: name })));
+};
+const buildTime = ({ name, label, readOnly }) => {
+  return (h("div", { class: "ez-col ez-col--sd-12 ez-col--tb-3 ez-padding-horizontal--small" },
+    h("ez-time-input", { enabled: !readOnly, label: label, "data-field-name": name, key: name })));
+};
+const buildDateTime = ({ name, label, readOnly }) => {
+  return (h("div", { class: "ez-col ez-col--sd-12 ez-col--tb-3 ez-padding-horizontal--small" },
+    h("ez-date-time-input", { enabled: !readOnly, label: label, "data-field-name": name, key: name })));
+};
+
+const buildFile = ({ name, label, readOnly }) => {
+  return (h("div", { class: "ez-col ez-col--sd-12 ez-padding-horizontal--small" },
+    h("ez-upload", { enabled: !readOnly, label: label, "data-field-name": name, key: name })));
+};
+
+const buildDecimal = ({ name, label, readOnly, props }) => {
+  const precision = Number((props === null || props === void 0 ? void 0 : props.precision) || 2);
+  const prettyPrecision = Number((props === null || props === void 0 ? void 0 : props.prettyPrecision) || precision);
+  return buildNumeric(name, label, readOnly, precision, prettyPrecision);
+};
+const buildInteger = ({ name, label, readOnly }) => {
+  return buildNumeric(name, label, readOnly, 0, 0);
+};
+function buildNumeric(fieldName, fieldLabel, readOnly, precision, prettyPrecision) {
+  return (h("div", { class: "ez-col ez-col--sd-12 ez-col--tb-3 ez-padding-horizontal--small" },
+    h("ez-number-input", { enabled: !readOnly, label: fieldLabel, precision: precision, prettyPrecision: prettyPrecision, "data-field-name": fieldName, key: fieldName })));
+}
+
+const buildSearch = ({ name, label, readOnly, required }) => {
+  return (h("div", { class: "ez-col ez-col--sd-12 ez-col--tb-3 ez-padding-horizontal--small" },
+    h("ez-search", { enabled: !readOnly, suppressEmptyOption: required, label: label, "data-field-name": name, key: name })));
+};
+
+const buildTextArea = ({ name, label, readOnly }) => {
+  return (h("div", { class: "ez-col ez-col--sd-12 ez-padding-horizontal--small", key: name },
+    h("ez-text-area", { enabled: !readOnly, label: label, "data-field-name": name })));
+};
+
+const buildTextInput = ({ name, label, readOnly }) => {
+  return (h("div", { class: "ez-col ez-col--sd-12 ez-col--tb-3 ez-padding-horizontal--small" },
+    h("ez-text-input", { label: label, "data-field-name": name, key: name, enabled: !readOnly })));
+};
+
+const uiBuilders = new Map();
+uiBuilders.set(UserInterface.CHECKBOX, buildCheckBox);
+uiBuilders.set(UserInterface.SWITCH, buildSwitch);
+uiBuilders.set(UserInterface.OPTIONSELECTOR, buildComboBox);
+uiBuilders.set(UserInterface.DATE, buildDate);
+uiBuilders.set(UserInterface.TIME, buildTime);
+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.LONGTEXT, buildTextArea);
+const fieldBuilder = (field) => {
+  const builder = uiBuilders.get(field.userInterface) || buildTextInput;
+  const label = field.required ? `${field.label} (obrigatório) *` : field.label;
+  return builder(Object.assign(Object.assign({}, field), { label }));
+};
+
+const ezFormViewCss = ".sc-ez-form-view-h{display:flex;flex-direction:row;flex-wrap:wrap;width:100%}";
+
+let EzFormView$1 = class extends HTMLElement$1 {
+  constructor() {
+    super();
+    this.__registerHost();
+  }
+  groupFields(fields) {
+    const result = new Map();
+    fields.forEach(item => {
+      const groupLabel = item.group;
+      if (groupLabel) {
+        let groupFields = result.get(groupLabel);
+        if (groupFields == undefined) {
+          groupFields = [];
+          result.set(groupLabel, groupFields);
+        }
+        groupFields.push(item);
+      }
+      else {
+        result.set(item.name, item);
+      }
+    });
+    return result;
+  }
+  render() {
+    ElementIDUtils.addIDInfoIfNotExists(this._element, 'ezFormView');
+    if (this.fields == undefined) {
+      return;
+    }
+    return (h(Host, null, 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 }, value.map(fi => fieldBuilder(fi))));
+      }
+      else {
+        return fieldBuilder(value);
+      }
+    })));
+  }
+  get _element() { return this; }
+  static get style() { return ezFormViewCss; }
+};
+
 /**
           * @ag-grid-community/all-modules - Advanced Data Grid / Data Table supporting Javascript / Typescript / React / Angular / Vue * @version v28.1.1
           * @link https://www.ag-grid.com/
@@ -122164,6 +122156,17 @@ class Tree extends Node$1 {
       }
     });
   }
+  updateItem(item) {
+    if (item == undefined) {
+      return;
+    }
+    const node = this.getNode(item.id);
+    if (node == undefined) {
+      return;
+    }
+    Object.keys(item).forEach(attrib => node.item[attrib] = item[attrib]);
+    this._changeCallback();
+  }
   async open(path) {
     return new Promise(async (resolve) => {
       await this.walk(this, path, node => node.item.expanded = true);
@@ -122339,7 +122342,7 @@ let EzTree$1 = class extends HTMLElement$1 {
     if (expanded) {
       this.ezOpenItem.emit(item);
     }
-    forceUpdate(this);
+    this._tree.updateItem(item);
   }
   previousLevel() {
     var _a;
@@ -122348,7 +122351,7 @@ let EzTree$1 = class extends HTMLElement$1 {
     }
     if (this.value.expanded) {
       this.value.expanded = false;
-      forceUpdate(this);
+      this._tree.updateItem(this.value);
     }
     else {
       const node = this._tree.getNode(this.value.id);
@@ -122371,7 +122374,7 @@ let EzTree$1 = class extends HTMLElement$1 {
     }
     else {
       this.value.expanded = true;
-      forceUpdate(this);
+      this._tree.updateItem(this.value);
     }
   }
   indexOf(id) {
@@ -122914,6 +122917,7 @@ const EzDropdown = /*@__PURE__*/proxyCustomElement(EzDropdown$1, [1,"ez-dropdown
 const EzFileItem = /*@__PURE__*/proxyCustomElement(EzFileItem$1, [1,"ez-file-item",{"canRemove":[4,"can-remove"],"fileName":[1,"file-name"],"iconName":[1,"icon-name"],"fileSize":[2,"file-size"],"progress":[2]}]);
 const EzFilterInput = /*@__PURE__*/proxyCustomElement(EzFilterInput$1, [1,"ez-filter-input",{"label":[1],"value":[1537],"enabled":[4],"errorMessage":[1537,"error-message"],"restrict":[1],"mode":[513]}]);
 const EzForm = /*@__PURE__*/proxyCustomElement(EzForm$1, [2,"ez-form",{"dataUnit":[1040],"config":[16],"recordsValidator":[16],"multiLevel":[4,"multi-level"],"levelResolver":[16],"contentBuilder":[16]}]);
+const EzFormView = /*@__PURE__*/proxyCustomElement(EzFormView$1, [2,"ez-form-view",{"fields":[16]}]);
 const EzGrid = /*@__PURE__*/proxyCustomElement(EzGrid$1, [6,"ez-grid",{"multipleSelection":[4,"multiple-selection"],"config":[1040],"serverUrl":[1,"server-url"],"dataUnit":[16],"statusResolver":[16],"_paginationInfo":[32],"_paginationChangedByKeyboard":[32]},[[0,"ezSelectionChange","onSelectionChange"]]]);
 const EzGuideNavigator = /*@__PURE__*/proxyCustomElement(EzGuideNavigator$1, [1,"ez-guide-navigator",{"binder":[16],"open":[1540],"items":[32],"filterText":[32]}]);
 const EzIcon = /*@__PURE__*/proxyCustomElement(EzIcon$1, [1,"ez-icon",{"size":[513],"href":[513],"iconName":[513,"icon-name"]}]);
@@ -122958,6 +122962,7 @@ const defineCustomElements = (opts) => {
   EzFileItem,
   EzFilterInput,
   EzForm,
+  EzFormView,
   EzGrid,
   EzGuideNavigator,
   EzIcon,
@@ -122989,4 +122994,4 @@ const defineCustomElements = (opts) => {
   }
 };
 
-export { EzActionsButton, EzAlert, EzApplication, EzBreadcrumb, EzButton, EzCalendar, EzCardItem, EzCheck, EzChip, EzCollapsibleBox, EzComboBox, EzDateInput, EzDateTimeInput, EzDialog, EzDropdown, EzFileItem, EzFilterInput, EzForm, EzGrid, EzGuideNavigator, EzIcon, EzList, EzLoadingBar, EzModal, EzModalContainer, EzNumberInput, EzPopover, EzPopup, EzRadioButton, EzScroller, EzSearch, EzSidebarButton, EzTabselector, EzTextArea, EzTextEdit, EzTextInput, EzTimeInput, EzToast, EzTree, EzUpload, EzViewStack, defineCustomElements };
+export { EzActionsButton, EzAlert, EzApplication, EzBreadcrumb, EzButton, EzCalendar, EzCardItem, EzCheck, EzChip, EzCollapsibleBox, EzComboBox, EzDateInput, EzDateTimeInput, EzDialog, EzDropdown, EzFileItem, EzFilterInput, EzForm, EzFormView, EzGrid, EzGuideNavigator, EzIcon, EzList, EzLoadingBar, EzModal, EzModalContainer, EzNumberInput, EzPopover, EzPopup, EzRadioButton, EzScroller, EzSearch, EzSidebarButton, EzTabselector, EzTextArea, EzTextEdit, EzTextInput, EzTimeInput, EzToast, EzTree, EzUpload, EzViewStack, defineCustomElements };