@sankhyalabs/ezui 2.11.0 → 2.12.0

package/dist/cjs/loader.cjs.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-fb179d74.js');
+const index = require('./index-5e208fa5.js');
 
 /*
  Stencil Client Patch Esm v2.13.0 | MIT Licensed | https://stenciljs.com
@@ -14,7 +14,7 @@ const patchEsm = () => {
 const defineCustomElements = (win, options) => {
   if (typeof window === 'undefined') return Promise.resolve();
   return patchEsm().then(() => {
-  return index.bootstrapLazy([["ez-actions-button.cjs",[[1,"ez-actions-button",{"enabled":[516],"actions":[1040],"size":[513],"showLabel":[516,"show-label"],"displayIcon":[513,"display-icon"],"checkOption":[516,"check-option"],"value":[513],"isTransparent":[516,"is-transparent"],"arrowActive":[516,"arrow-active"],"_selectedAction":[32],"hideActions":[64],"isOpened":[64]}]]],["ez-dialog.cjs",[[1,"ez-dialog",{"confirm":[1028],"dialogType":[1025,"dialog-type"],"message":[1025],"opened":[1540],"personalizedIconPath":[1025,"personalized-icon-path"],"ezTitle":[1025,"ez-title"],"show":[64]}]]],["ez-grid.cjs",[[6,"ez-grid",{"multipleSelection":[4,"multiple-selection"],"config":[1040],"serverUrl":[1,"server-url"],"dataUnit":[16],"statusResolver":[16],"_paginationInfo":[32],"_paginationChangedByKeyboard":[32],"setColumnsDef":[64],"addColumnMenuItem":[64],"setColumnsState":[64],"setData":[64],"getSelection":[64],"getColumnsState":[64],"getColumns":[64],"quickFilter":[64]},[[0,"ezSelectionChange","onSelectionChange"]]]]],["ez-alert.cjs",[[1,"ez-alert",{"alertType":[513,"alert-type"]}]]],["ez-breadcrumb.cjs",[[1,"ez-breadcrumb",{"items":[1040]}]]],["ez-chip.cjs",[[1,"ez-chip",{"label":[513],"enabled":[516],"removePosition":[513,"remove-position"],"mode":[513],"value":[1540],"setFocus":[64],"setBlur":[64]}]]],["ez-dropdown.cjs",[[1,"ez-dropdown",{"items":[1040],"value":[1040],"itemBuilder":[16]}]]],["ez-file-item.cjs",[[1,"ez-file-item",{"canRemove":[4,"can-remove"],"fileName":[1,"file-name"],"iconName":[1,"icon-name"],"fileSize":[2,"file-size"],"progress":[2]}]]],["ez-tree.cjs",[[1,"ez-tree",{"items":[16],"value":[1040],"iconResolver":[16],"_waintingForLoad":[32],"selectItem":[64],"openItem":[64],"disableItem":[64],"enableItem":[64],"addChild":[64]},[[2,"keydown","onKeyDownListener"]]]]],["ez-application.cjs",[[0,"ez-application"]]],["ez-card-item.cjs",[[1,"ez-card-item",{"item":[16]}]]],["ez-list.cjs",[[1,"ez-list",{"dataSource":[1040],"useGroups":[1540,"use-groups"],"ezDraggable":[1028,"ez-draggable"],"ezSelectable":[1028,"ez-selectable"],"itemSlotBuilder":[1040],"_listItems":[32],"_listGroupItems":[32],"clearHistory":[64],"scrollToTop":[64],"setSelection":[64],"getSelection":[64],"getList":[64]}]]],["ez-modal.cjs",[[1,"ez-modal",{"modalSize":[1,"modal-size"],"align":[1],"opened":[1028],"closeEsc":[4,"close-esc"],"closeOutsideClick":[4,"close-outside-click"]}]]],["ez-popover.cjs",[[1,"ez-popover",{"autoClose":[516,"auto-close"],"top":[1537],"left":[1537],"bottom":[1537],"right":[1537],"boxWidth":[513,"box-width"],"opened":[1540],"innerElement":[1537,"inner-element"],"overlayType":[513,"overlay-type"],"updatePosition":[64],"show":[64],"hide":[64]}]]],["ez-popup.cjs",[[1,"ez-popup",{"size":[1],"opened":[1540],"useHeader":[516,"use-header"],"heightMode":[513,"height-mode"],"ezTitle":[1,"ez-title"]}]]],["ez-toast.cjs",[[1,"ez-toast",{"message":[1025],"fadeTime":[1026,"fade-time"],"useIcon":[1028,"use-icon"],"canClose":[1028,"can-close"],"show":[64]}]]],["ez-text-input.cjs",[[1,"ez-text-input",{"label":[513],"value":[1537],"enabled":[516],"errorMessage":[1537,"error-message"],"mask":[1],"canShowError":[516,"can-show-error"],"restrict":[1],"mode":[513],"noBorder":[516,"no-border"],"setFocus":[64],"setBlur":[64],"isInvalid":[64]}]]],["ez-filter-input.cjs",[[1,"ez-filter-input",{"label":[1],"value":[1537],"enabled":[4],"errorMessage":[1537,"error-message"],"restrict":[1],"mode":[513],"setFocus":[64],"setBlur":[64],"isInvalid":[64]}]]],["ez-modal-container.cjs",[[6,"ez-modal-container",{"modalTitle":[1,"modal-title"],"modalSubTitle":[1,"modal-sub-title"],"showTitleBar":[4,"show-title-bar"],"cancelButtonLabel":[1,"cancel-button-label"],"okButtonLabel":[1,"ok-button-label"],"cancelButtonStatus":[1,"cancel-button-status"],"okButtonStatus":[1,"ok-button-status"]}]]],["ez-loading-bar.cjs",[[1,"ez-loading-bar",{"_showLoading":[32],"hide":[64],"show":[64]}]]],["ez-radio-button.cjs",[[1,"ez-radio-button",{"value":[1544],"options":[1040],"enabled":[516],"label":[513],"direction":[1537]}]]],["ez-scroller.cjs",[[1,"ez-scroller",{"direction":[1],"locked":[4],"activeShadow":[4,"active-shadow"],"isActive":[32]},[[2,"click","clickListener"],[1,"mousedown","mouseDownHandler"],[1,"mouseup","mouseUpHandler"],[1,"mousemove","mouseMoveHandler"]]]]],["ez-sidebar-button.cjs",[[1,"ez-sidebar-button"]]],["ez-view-stack.cjs",[[0,"ez-view-stack",{"show":[64],"getSelectedIndex":[64]}]]],["ez-collapsible-box.cjs",[[1,"ez-collapsible-box",{"value":[1540],"label":[513],"headerSize":[513,"header-size"],"iconPlacement":[513,"icon-placement"],"headerAlign":[513,"header-align"],"removable":[516],"editable":[516],"conditionalSave":[16],"_activeEditText":[32],"showHide":[64],"applyFocusTextEdit":[64],"cancelEdition":[64]}]]],["ez-search.cjs",[[1,"ez-search",{"value":[1537],"label":[1537],"enabled":[1540],"errorMessage":[1537,"error-message"],"optionLoader":[16],"showSelectedValue":[4,"show-selected-value"],"showOptionValue":[4,"show-option-value"],"suppressEmptyOption":[4,"suppress-empty-option"],"mode":[513],"setFocus":[64],"setBlur":[64],"isInvalid":[64]}]]],["ez-date-input.cjs",[[1,"ez-date-input",{"label":[513],"value":[1040],"enabled":[516],"errorMessage":[1537,"error-message"],"mode":[513],"setFocus":[64],"setBlur":[64],"isInvalid":[64]}]]],["ez-date-time-input.cjs",[[1,"ez-date-time-input",{"label":[513],"value":[1040],"enabled":[516],"errorMessage":[1537,"error-message"],"showSeconds":[516,"show-seconds"],"mode":[513],"setFocus":[64],"setBlur":[64],"isInvalid":[64]}]]],["ez-time-input.cjs",[[1,"ez-time-input",{"label":[513],"value":[1026],"enabled":[516],"errorMessage":[1537,"error-message"],"showSeconds":[516,"show-seconds"],"mode":[513],"setFocus":[64],"setBlur":[64],"isInvalid":[64]}]]],["ez-number-input.cjs",[[1,"ez-number-input",{"label":[1],"value":[1538],"enabled":[4],"errorMessage":[1537,"error-message"],"precision":[2],"prettyPrecision":[2,"pretty-precision"],"mode":[513],"setFocus":[64],"setBlur":[64],"isInvalid":[64]}]]],["ez-tabselector.cjs",[[1,"ez-tabselector",{"selectedIndex":[1538,"selected-index"],"selectedTab":[1537,"selected-tab"],"tabs":[1],"_processedTabs":[32]}]]],["ez-check.cjs",[[1,"ez-check",{"label":[513],"value":[1540],"enabled":[1540],"indeterminate":[516],"mode":[513],"getMode":[64],"setFocus":[64]}]]],["ez-text-area.cjs",[[1,"ez-text-area",{"label":[513],"value":[1537],"enabled":[516],"errorMessage":[1537,"error-message"],"rows":[1538],"canShowError":[516,"can-show-error"],"mode":[513],"setFocus":[64],"setBlur":[64],"isInvalid":[64]}]]],["ez-upload.cjs",[[1,"ez-upload",{"label":[1],"enabled":[4],"maxFileSize":[2,"max-file-size"],"maxFiles":[2,"max-files"],"requestHeaders":[8,"request-headers"],"urlUpload":[1,"url-upload"],"urlDelete":[1,"url-delete"],"value":[1040],"addFiles":[64],"setFocus":[64],"setBlur":[64]}]]],["ez-text-edit.cjs",[[1,"ez-text-edit",{"value":[1],"styled":[16],"_newValue":[32],"applyFocusSelect":[64]}]]],["ez-combo-box.cjs",[[1,"ez-combo-box",{"value":[1537],"label":[513],"enabled":[516],"options":[1040],"errorMessage":[1537,"error-message"],"searchMode":[4,"search-mode"],"showSelectedValue":[4,"show-selected-value"],"showOptionValue":[4,"show-option-value"],"suppressSearch":[4,"suppress-search"],"optionLoader":[16],"suppressEmptyOption":[4,"suppress-empty-option"],"canShowError":[516,"can-show-error"],"mode":[513],"_preSelection":[32],"_visibleOptions":[32],"_startLoading":[32],"_showLoading":[32],"_criteria":[32],"setFocus":[64],"setBlur":[64],"isInvalid":[64]}]]],["ez-calendar.cjs",[[1,"ez-calendar",{"value":[1040],"floating":[516],"time":[516],"showSeconds":[516,"show-seconds"],"show":[64],"fitVertical":[64],"hide":[64]}]]],["ez-icon.cjs",[[1,"ez-icon",{"size":[513],"href":[513],"iconName":[513,"icon-name"]}]]],["ez-button.cjs",[[1,"ez-button",{"label":[513],"enabled":[516],"mode":[513],"image":[513],"iconName":[513,"icon-name"],"size":[513],"setFocus":[64],"setBlur":[64]}]]],["ez-form.cjs",[[0,"ez-form",{"dataUnit":[1040],"config":[16],"recordsValidator":[16],"validate":[64]}]]]], options);
+  return index.bootstrapLazy([["ez-actions-button.cjs",[[1,"ez-actions-button",{"enabled":[516],"actions":[1040],"size":[513],"showLabel":[516,"show-label"],"displayIcon":[513,"display-icon"],"checkOption":[516,"check-option"],"value":[513],"isTransparent":[516,"is-transparent"],"arrowActive":[516,"arrow-active"],"_selectedAction":[32],"hideActions":[64],"isOpened":[64]}]]],["ez-dialog.cjs",[[1,"ez-dialog",{"confirm":[1028],"dialogType":[1025,"dialog-type"],"message":[1025],"opened":[1540],"personalizedIconPath":[1025,"personalized-icon-path"],"ezTitle":[1025,"ez-title"],"show":[64]}]]],["ez-filter-input.cjs",[[1,"ez-filter-input",{"label":[1],"value":[1537],"enabled":[4],"errorMessage":[1537,"error-message"],"restrict":[1],"mode":[513],"setFocus":[64],"setBlur":[64],"isInvalid":[64]}]]],["ez-grid.cjs",[[6,"ez-grid",{"multipleSelection":[4,"multiple-selection"],"config":[1040],"serverUrl":[1,"server-url"],"dataUnit":[16],"statusResolver":[16],"_paginationInfo":[32],"_paginationChangedByKeyboard":[32],"setColumnsDef":[64],"addColumnMenuItem":[64],"setColumnsState":[64],"setData":[64],"getSelection":[64],"getColumnsState":[64],"getColumns":[64],"quickFilter":[64]},[[0,"ezSelectionChange","onSelectionChange"]]]]],["ez-modal-container.cjs",[[6,"ez-modal-container",{"modalTitle":[1,"modal-title"],"modalSubTitle":[1,"modal-sub-title"],"showTitleBar":[4,"show-title-bar"],"cancelButtonLabel":[1,"cancel-button-label"],"okButtonLabel":[1,"ok-button-label"],"cancelButtonStatus":[1,"cancel-button-status"],"okButtonStatus":[1,"ok-button-status"]}]]],["ez-alert.cjs",[[1,"ez-alert",{"alertType":[513,"alert-type"]}]]],["ez-breadcrumb.cjs",[[1,"ez-breadcrumb",{"items":[1040]}]]],["ez-chip.cjs",[[1,"ez-chip",{"label":[513],"enabled":[516],"removePosition":[513,"remove-position"],"mode":[513],"value":[1540],"setFocus":[64],"setBlur":[64]}]]],["ez-dropdown.cjs",[[1,"ez-dropdown",{"items":[1040],"value":[1040],"itemBuilder":[16]}]]],["ez-file-item.cjs",[[1,"ez-file-item",{"canRemove":[4,"can-remove"],"fileName":[1,"file-name"],"iconName":[1,"icon-name"],"fileSize":[2,"file-size"],"progress":[2]}]]],["ez-application.cjs",[[0,"ez-application"]]],["ez-card-item.cjs",[[1,"ez-card-item",{"item":[16]}]]],["ez-list.cjs",[[1,"ez-list",{"dataSource":[1040],"useGroups":[1540,"use-groups"],"ezDraggable":[1028,"ez-draggable"],"ezSelectable":[1028,"ez-selectable"],"itemSlotBuilder":[1040],"_listItems":[32],"_listGroupItems":[32],"clearHistory":[64],"scrollToTop":[64],"setSelection":[64],"getSelection":[64],"getList":[64]}]]],["ez-loading-bar.cjs",[[1,"ez-loading-bar",{"_showLoading":[32],"hide":[64],"show":[64]}]]],["ez-modal.cjs",[[1,"ez-modal",{"modalSize":[1,"modal-size"],"align":[1],"opened":[1028],"closeEsc":[4,"close-esc"],"closeOutsideClick":[4,"close-outside-click"]}]]],["ez-popover.cjs",[[1,"ez-popover",{"autoClose":[516,"auto-close"],"top":[1537],"left":[1537],"bottom":[1537],"right":[1537],"boxWidth":[513,"box-width"],"opened":[1540],"innerElement":[1537,"inner-element"],"overlayType":[513,"overlay-type"],"updatePosition":[64],"show":[64],"hide":[64]}]]],["ez-popup.cjs",[[1,"ez-popup",{"size":[1],"opened":[1540],"useHeader":[516,"use-header"],"heightMode":[513,"height-mode"],"ezTitle":[1,"ez-title"]}]]],["ez-radio-button.cjs",[[1,"ez-radio-button",{"value":[1544],"options":[1040],"enabled":[516],"label":[513],"direction":[1537]}]]],["ez-scroller.cjs",[[1,"ez-scroller",{"direction":[1],"locked":[4],"activeShadow":[4,"active-shadow"],"isActive":[32]},[[2,"click","clickListener"],[1,"mousedown","mouseDownHandler"],[1,"mouseup","mouseUpHandler"],[1,"mousemove","mouseMoveHandler"]]]]],["ez-sidebar-button.cjs",[[1,"ez-sidebar-button"]]],["ez-toast.cjs",[[1,"ez-toast",{"message":[1025],"fadeTime":[1026,"fade-time"],"useIcon":[1028,"use-icon"],"canClose":[1028,"can-close"],"show":[64]}]]],["ez-view-stack.cjs",[[0,"ez-view-stack",{"show":[64],"getSelectedIndex":[64]}]]],["ez-tabselector.cjs",[[1,"ez-tabselector",{"selectedIndex":[1538,"selected-index"],"selectedTab":[1537,"selected-tab"],"tabs":[1],"_processedTabs":[32]}]]],["ez-tree.cjs",[[1,"ez-tree",{"items":[16],"value":[1040],"selectedId":[1537,"selected-id"],"iconResolver":[16],"tooltipResolver":[16],"_waintingForLoad":[32],"selectItem":[64],"openItem":[64],"disableItem":[64],"enableItem":[64],"addChild":[64]},[[2,"keydown","onKeyDownListener"]]]]],["ez-text-input.cjs",[[1,"ez-text-input",{"label":[513],"value":[1537],"enabled":[516],"errorMessage":[1537,"error-message"],"mask":[1],"canShowError":[516,"can-show-error"],"restrict":[1],"mode":[513],"noBorder":[516,"no-border"],"setFocus":[64],"setBlur":[64],"isInvalid":[64]}]]],["ez-collapsible-box.cjs",[[1,"ez-collapsible-box",{"value":[1540],"label":[513],"headerSize":[513,"header-size"],"iconPlacement":[513,"icon-placement"],"headerAlign":[513,"header-align"],"removable":[516],"editable":[516],"conditionalSave":[16],"_activeEditText":[32],"showHide":[64],"applyFocusTextEdit":[64],"cancelEdition":[64]}]]],["ez-search.cjs",[[1,"ez-search",{"value":[1537],"label":[1537],"enabled":[1540],"errorMessage":[1537,"error-message"],"optionLoader":[16],"showSelectedValue":[4,"show-selected-value"],"showOptionValue":[4,"show-option-value"],"suppressEmptyOption":[4,"suppress-empty-option"],"mode":[513],"setFocus":[64],"setBlur":[64],"isInvalid":[64]}]]],["ez-date-input.cjs",[[1,"ez-date-input",{"label":[513],"value":[1040],"enabled":[516],"errorMessage":[1537,"error-message"],"mode":[513],"setFocus":[64],"setBlur":[64],"isInvalid":[64]}]]],["ez-date-time-input.cjs",[[1,"ez-date-time-input",{"label":[513],"value":[1040],"enabled":[516],"errorMessage":[1537,"error-message"],"showSeconds":[516,"show-seconds"],"mode":[513],"setFocus":[64],"setBlur":[64],"isInvalid":[64]}]]],["ez-time-input.cjs",[[1,"ez-time-input",{"label":[513],"value":[1026],"enabled":[516],"errorMessage":[1537,"error-message"],"showSeconds":[516,"show-seconds"],"mode":[513],"setFocus":[64],"setBlur":[64],"isInvalid":[64]}]]],["ez-number-input.cjs",[[1,"ez-number-input",{"label":[1],"value":[1538],"enabled":[4],"errorMessage":[1537,"error-message"],"precision":[2],"prettyPrecision":[2,"pretty-precision"],"mode":[513],"setFocus":[64],"setBlur":[64],"isInvalid":[64]}]]],["ez-check.cjs",[[1,"ez-check",{"label":[513],"value":[1540],"enabled":[1540],"indeterminate":[516],"mode":[513],"getMode":[64],"setFocus":[64]}]]],["ez-text-area.cjs",[[1,"ez-text-area",{"label":[513],"value":[1537],"enabled":[516],"errorMessage":[1537,"error-message"],"rows":[1538],"canShowError":[516,"can-show-error"],"mode":[513],"setFocus":[64],"setBlur":[64],"isInvalid":[64]}]]],["ez-upload.cjs",[[1,"ez-upload",{"label":[1],"enabled":[4],"maxFileSize":[2,"max-file-size"],"maxFiles":[2,"max-files"],"requestHeaders":[8,"request-headers"],"urlUpload":[1,"url-upload"],"urlDelete":[1,"url-delete"],"value":[1040],"addFiles":[64],"setFocus":[64],"setBlur":[64]}]]],["ez-text-edit.cjs",[[1,"ez-text-edit",{"value":[1],"styled":[16],"_newValue":[32],"applyFocusSelect":[64]}]]],["ez-combo-box.cjs",[[1,"ez-combo-box",{"value":[1537],"label":[513],"enabled":[516],"options":[1040],"errorMessage":[1537,"error-message"],"searchMode":[4,"search-mode"],"showSelectedValue":[4,"show-selected-value"],"showOptionValue":[4,"show-option-value"],"suppressSearch":[4,"suppress-search"],"optionLoader":[16],"suppressEmptyOption":[4,"suppress-empty-option"],"canShowError":[516,"can-show-error"],"mode":[513],"_preSelection":[32],"_visibleOptions":[32],"_startLoading":[32],"_showLoading":[32],"_criteria":[32],"setFocus":[64],"setBlur":[64],"isInvalid":[64]}]]],["ez-calendar.cjs",[[1,"ez-calendar",{"value":[1040],"floating":[516],"time":[516],"showSeconds":[516,"show-seconds"],"show":[64],"fitVertical":[64],"hide":[64]}]]],["ez-icon.cjs",[[1,"ez-icon",{"size":[513],"href":[513],"iconName":[513,"icon-name"]}]]],["ez-button.cjs",[[1,"ez-button",{"label":[513],"enabled":[516],"mode":[513],"image":[513],"iconName":[513,"icon-name"],"size":[513],"setFocus":[64],"setBlur":[64]}]]],["ez-form-view.cjs",[[2,"ez-form-view",{"fields":[16]}]]],["ez-form.cjs",[[2,"ez-form",{"dataUnit":[1040],"config":[16],"recordsValidator":[16],"multiLevel":[4,"multi-level"],"levelResolver":[16],"contentBuilder":[16],"validate":[64]}]]]], options);
   });
 };
 

package/dist/collection/collection-manifest.json

@@ -23,6 +23,7 @@
     "./components/ez-dropdown/ez-dropdown.js",
     "./components/ez-file-item/ez-file-item.js",
     "./components/ez-filter-input/ez-filter-input.js",
+    "./components/ez-form-view/ez-form-view.js",
     "./components/ez-grid/ez-grid.js",
     "./components/ez-icon/ez-icon.js",
     "./components/ez-loading-bar/ez-loading-bar.js",

package/dist/collection/components/ez-form/{structure/FormSheetMetadata.js → FormMetadata.js}

@@ -1,3 +1,4 @@
+import { UserInterface } from "@sankhyalabs/core";
 export class FormMetadata {
   constructor() {
     this._sheets = new Map();
@@ -27,40 +28,20 @@ export class FormMetadata {
     return this._defaultValues;
   }
 }
-export 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;
-};
-export 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;
-};
 export 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);
-      }
-    });
+    const visibleFields = (unitMD.fields || []).filter(descriptor => descriptor.visible !== false);
+    const fields = visibleFields.map(descriptor => buildFormField(descriptor));
     let defaultValues = {};
     visibleFields
       .filter(descriptor => descriptor.defaultValue)
-      .map((descriptor) => defaultValues[descriptor.name] = descriptor.defaultValue);
+      .forEach((descriptor) => defaultValues[descriptor.name] = descriptor.defaultValue);
     metadata.addSheet({
-      label: unitMD.label,
       name: unitMD.name,
-      items: Array.from(items.values()),
+      label: unitMD.label,
+      fields,
       requiredFields: visibleFields
         .filter(descriptor => descriptor.required)
         .map(descriptor => descriptor.name),
@@ -72,29 +53,6 @@ export const buildFromDataUnit = (dataUnit) => {
   }
   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);
-  }
-}
 export const buildFromConfig = (config, dataUnit) => {
   var _a, _b;
   const sheets = new Map();
@@ -117,10 +75,11 @@ export const buildFromConfig = (config, dataUnit) => {
       const descriptor = dataUnit.getField(field.name);
       if (descriptor && tabConfig.visible) {
         if (!sheets.has(tabConfig)) {
-          sheets.set(tabConfig, new Map());
+          sheets.set(tabConfig, []);
         }
-        const tabItens = sheets.get(tabConfig);
-        if (isRequiredField(descriptor, field)) {
+        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;
@@ -131,18 +90,17 @@ export const buildFromConfig = (config, dataUnit) => {
         if (defaultValue) {
           defaultValues[field.name] = field.defaultValue;
         }
-        resolveFieldGroup(tabItens, field, descriptor);
       }
     }
   });
   const metadata = new FormMetadata();
   Array.from(sheets.entries())
     .sort(sortTabs)
-    .forEach(([key, value]) => {
+    .forEach(([key, fields]) => {
     metadata.addSheet({
       label: (key.label === "__main") ? "Principal" : key.label,
       name: key.label,
-      items: Array.from(value.values()),
+      fields,
       requiredFields,
       cleanOnCopyFields,
       defaultValues
@@ -150,3 +108,30 @@ export const buildFromConfig = (config, dataUnit) => {
   });
   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);
+};

package/dist/collection/components/ez-form/ez-form.css

@@ -1,4 +1,4 @@
-ez-form {
+:host {
   display: flex;
   flex-direction: column;
   width: 100%;
@@ -7,4 +7,10 @@ ez-form {
 .dynamic-content ez-collapsible-box {
   --ez-collapsible-box__header--padding-right: var(--space-small, 6px);
   --ez-collapsible-box__header--padding-left: var(--space-small, 6px);
+}
+
+.multi-level__container {
+  display: grid;
+  grid-template-columns: minmax(20%, 300px) auto;
+  width: 100%;
 }

package/dist/collection/components/ez-form/ez-form.js

@@ -1,11 +1,10 @@
-import { Component, h, Host, Prop, Element, forceUpdate, Method, Watch, Event } from "@stencil/core";
-import { DataUnit, Action, DataUnitAction, ElementIDUtils, StringUtils } from "@sankhyalabs/core";
-import { FormSheet } from "./structure/FormSheet";
-import { buildFromConfig, buildFromDataUnit } from "./structure/FormSheetMetadata";
+import { Action, DataUnit, DataUnitAction, ElementIDUtils, StringUtils } from "@sankhyalabs/core";
+import { Component, Element, Event, Host, Method, Prop, Watch, forceUpdate, h } from "@stencil/core";
 import { createStore } from "redux";
-import { formReducer, selectCurrentSheet, selectFormMetadata, loadMetadata, changeTab } from "./store/form.slice";
-import DataBinder from "./DataBinder";
 import ApplicationUtils from "../../utils/ApplicationUtils";
+import DataBinder from "./DataBinder";
+import { changeTab, formReducer, loadMetadata, selectCurrentSheet, selectCurrentSheetId, selectFormMetadata } from "./store/form.slice";
+import { buildFromConfig, buildFromDataUnit } from "./FormMetadata";
 export class EzForm {
   constructor() {
     this.onDataUnitAction = (action) => {
@@ -85,17 +84,43 @@ export class EzForm {
       }
     });
   }
+  resolveLevel(items) {
+    if (!this.levelResolver) {
+      return items;
+    }
+    return this.levelResolver(items);
+  }
+  getMultiLevelContent(sheets, currentSheet, currentSheetId) {
+    const treeItems = this.resolveLevel(sheets.map(sheet => {
+      const item = {
+        id: sheet.name,
+        label: sheet.label
+      };
+      return item;
+    }));
+    return (h("div", { class: "multi-level__container" },
+      h("div", null,
+        h("ez-tree", { selectedId: currentSheet === null || currentSheet === void 0 ? void 0 : currentSheet.name, items: treeItems, onEzChange: (evt) => {
+            var _a;
+            const selectedItem = (_a = evt.detail) === null || _a === void 0 ? void 0 : _a.id;
+            if (selectedItem && selectedItem !== (currentSheet === null || currentSheet === void 0 ? void 0 : currentSheet.name)) {
+              this._store.dispatch(changeTab(selectedItem));
+            }
+          } })),
+      h("div", null, this.buildFormContent(currentSheetId, currentSheet))));
+  }
   getDynamicContent() {
-    var _a;
+    var _a, _b;
     const formMD = selectFormMetadata(this._store.getState());
     if (!formMD)
       return null;
-    const currentSheet = selectCurrentSheet((_a = this._store) === null || _a === void 0 ? void 0 : _a.getState());
-    if (!currentSheet) {
-      return null;
-    }
     const allSheets = Array.from(formMD.getAllSheets().values());
-    const result = [];
+    const currentSheetId = selectCurrentSheetId((_a = this._store) === null || _a === void 0 ? void 0 : _a.getState());
+    const currentSheet = selectCurrentSheet((_b = this._store) === null || _b === void 0 ? void 0 : _b.getState());
+    if (this.multiLevel) {
+      return this.getMultiLevelContent(allSheets, currentSheet, currentSheetId);
+    }
+    let result = [];
     if (allSheets.length > 1) {
       const tabs = allSheets.map((sheet, index) => {
         return { tabKey: sheet.name, label: sheet.label, index };
@@ -103,12 +128,26 @@ export class EzForm {
       const idTabSelector = `selector`;
       result.push(h("ez-tabselector", { tabs: this.buildIdTabSelector(tabs), onEzChange: (evt) => this._store.dispatch(changeTab(evt.detail)), selectedTab: currentSheet.name, "data-element-id": idTabSelector }));
     }
-    const idFormSheet = `${StringUtils.replaceAccentuatedChars(StringUtils.toCamelCase(currentSheet.label), false)}_selectorContainer`;
-    result.push(h(FormSheet, { store: this._store, source: currentSheet, dataElementId: idFormSheet }));
+    result = result.concat(this.buildFormContent(currentSheetId, currentSheet));
     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, fields);
+      if (customContent != undefined) {
+        return h("div", { "innerHTML": customContent });
+      }
+    }
+    if (currentSheet == undefined) {
+      return;
+    }
+    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__container", "data-element-id": idFormSheet },
+      h("ez-form-view", { class: "ez-row ez-padding-vertical--small", fields: fields })));
+  }
   processMetadata() {
-    if (!this.isStatic() && this.dataUnit) {
+    if (!this.isStatic() && this.dataUnit && this._store) {
       const metadata = this.config != undefined && Object.values(this.config).length > 0 ? buildFromConfig(this.config, this.dataUnit) : buildFromDataUnit(this.dataUnit);
       this._store.dispatch(loadMetadata(metadata));
     }
@@ -148,7 +187,7 @@ export class EzForm {
     }
     if (action.type === Action.RECORDS_ADDED) {
       const metadata = selectFormMetadata(this._store.getState());
-      const defaultValues = metadata.getDefaultValues();
+      const defaultValues = metadata === null || metadata === void 0 ? void 0 : metadata.getDefaultValues();
       if (defaultValues) {
         const records = action.payload;
         return new DataUnitAction(Action.RECORDS_ADDED, records.map(record => {
@@ -197,6 +236,7 @@ export class EzForm {
     return (h(Host, null, this.isStatic() ? null : this.getDynamicContent()));
   }
   static get is() { return "ez-form"; }
+  static get encapsulation() { return "scoped"; }
   static get originalStyleUrls() { return {
     "$": ["ez-form.css"]
   }; }
@@ -232,7 +272,8 @@ export class EzForm {
         "resolved": "IFormConfig",
         "references": {
           "IFormConfig": {
-            "location": "local"
+            "location": "import",
+            "path": "./interfaces"
           }
         }
       },
@@ -251,7 +292,8 @@ export class EzForm {
         "resolved": "IRecordValidator",
         "references": {
           "IRecordValidator": {
-            "location": "local"
+            "location": "import",
+            "path": "./interfaces"
           }
         }
       },
@@ -261,6 +303,72 @@ export class EzForm {
         "tags": [],
         "text": "Define um validador respons\u00E1vel pela integridade dos registros."
       }
+    },
+    "multiLevel": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Habilita o modo de organiza\u00E7\u00E3o com v\u00E1rios n\u00EDveis."
+      },
+      "attribute": "multi-level",
+      "reflect": false
+    },
+    "levelResolver": {
+      "type": "unknown",
+      "mutable": false,
+      "complexType": {
+        "original": "(items: Array<ITreeItem>) => Array<ITreeItem>",
+        "resolved": "(items: ITreeItem[]) => ITreeItem[]",
+        "references": {
+          "Array": {
+            "location": "global"
+          },
+          "ITreeItem": {
+            "location": "import",
+            "path": "../ez-tree/interfaces/ITreeItem"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Define um resolvedor de n\u00EDvel no modo `multiLevel`."
+      }
+    },
+    "contentBuilder": {
+      "type": "unknown",
+      "mutable": false,
+      "complexType": {
+        "original": "(selectedTab: string, fields: Array<IFormViewField>) => HTMLElement | string",
+        "resolved": "(selectedTab: string, fields: IFormViewField[]) => string | HTMLElement",
+        "references": {
+          "Array": {
+            "location": "global"
+          },
+          "IFormViewField": {
+            "location": "import",
+            "path": "../ez-form-view/interfaces"
+          },
+          "HTMLElement": {
+            "location": "global"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Define um construtor. Isso permite personalizar o conte\u00FAdo do formul\u00E1rio"
+      }
     }
   }; }
   static get events() { return [{
@@ -296,7 +404,8 @@ export class EzForm {
             "path": "@sankhyalabs/core"
           },
           "IValidationResult": {
-            "location": "local"
+            "location": "import",
+            "path": "./interfaces"
           }
         },
         "return": "Promise<void>"

package/dist/collection/components/ez-form/interfaces/IDefaultConfig.js

@@ -0,0 +1 @@
+export {};

package/dist/collection/components/ez-form/interfaces/IFieldConfig.js

@@ -0,0 +1 @@
+export {};

package/dist/collection/components/ez-form/interfaces/IFormConfig.js

@@ -0,0 +1 @@
+export {};

package/dist/collection/components/ez-form/interfaces/IFormSheetMetadata.js

@@ -0,0 +1 @@
+export {};

package/dist/collection/components/ez-form/interfaces/IInvalidField.js

@@ -0,0 +1 @@
+export {};

package/dist/collection/components/ez-form/interfaces/IRecordValidator.js

@@ -0,0 +1 @@
+export {};

package/dist/collection/components/ez-form/interfaces/ITabConfig.js

@@ -0,0 +1 @@
+export {};

package/dist/collection/components/ez-form/interfaces/IValidationResult.js

@@ -0,0 +1 @@
+export {};

package/dist/collection/components/ez-form/interfaces/index.js

@@ -0,0 +1 @@
+export {};

package/dist/collection/components/ez-form/store/form.slice.js

@@ -20,15 +20,19 @@ export function loadMetadata(formMetadata) {
 export function changeTab(currentSheet) {
   return {
     type: FormActions.CHANGE_TAB,
-    payload: currentSheet.tabKey
+    payload: typeof currentSheet === "string" ? currentSheet : currentSheet.tabKey
   };
 }
 ///////////////////////////////    SELECTORS    ///////////////////////////////
 export function selectFormMetadata(state) {
   return state.formMetadata;
 }
+export function selectCurrentSheetId(state) {
+  return state.currentSheet;
+}
 export function selectCurrentSheet(state) {
-  return state.currentSheet ? state.formMetadata.getSheet(state.currentSheet) : Array.from(state.formMetadata.getAllSheets().values())[0];
+  const currentSheetId = selectCurrentSheetId(state);
+  return currentSheetId ? state.formMetadata.getSheet(currentSheetId) : Array.from(state.formMetadata.getAllSheets().values())[0];
 }
 ///////////////////////////////      TYPES      ///////////////////////////////
 var FormActions;

package/dist/collection/components/ez-form-view/ez-form-view.css

@@ -0,0 +1,6 @@
+:host {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  width: 100%;
+}

package/dist/collection/components/ez-form-view/ez-form-view.js

@@ -0,0 +1,71 @@
+import { Component, Element, Host, Prop, h } from '@stencil/core';
+import { fieldBuilder } from './fieldbuilder/FieldBuilder';
+import { ElementIDUtils } from '@sankhyalabs/core';
+export class EzFormView {
+  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);
+      }
+    })));
+  }
+  static get is() { return "ez-form-view"; }
+  static get encapsulation() { return "scoped"; }
+  static get originalStyleUrls() { return {
+    "$": ["ez-form-view.css"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["ez-form-view.css"]
+  }; }
+  static get properties() { return {
+    "fields": {
+      "type": "unknown",
+      "mutable": false,
+      "complexType": {
+        "original": "Array<IFormViewField>",
+        "resolved": "IFormViewField[]",
+        "references": {
+          "Array": {
+            "location": "global"
+          },
+          "IFormViewField": {
+            "location": "import",
+            "path": "./interfaces/IFormViewField"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Define a lista de metadados usada para criar os campos de user interface."
+      }
+    }
+  }; }
+  static get elementRef() { return "_element"; }
+}

package/dist/collection/components/ez-form-view/fieldbuilder/FieldBuilder.js

@@ -0,0 +1,26 @@
+import { UserInterface } from "@sankhyalabs/core";
+import { buildCheckBox, buildSwitch } from "./templates/CheckBox.tpl";
+import { buildComboBox } from "./templates/ComboBox.tpl";
+import { buildDate, buildTime, buildDateTime } from "./templates/DateInput.tpl";
+import { buildFile } from "./templates/FileInput.tpl";
+import { buildDecimal, buildInteger } from "./templates/NumberInput.tpl";
+import { buildSearch } from "./templates/SearchInput.tpl";
+import { buildTextArea } from "./templates/TextArea.tpl";
+import { buildTextInput } from "./templates/TextInput.tpl";
+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);
+export 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 }));
+};

package/dist/collection/components/{ez-form/fieldbuilder/tpl → ez-form-view/fieldbuilder/templates}/CheckBox.tpl.js

@@ -1,10 +1,10 @@
 import { h } from "@stencil/core";
 import { CheckMode } from "../../../ez-check/CheckMode";
-export const buildSwitch = (fieldConfig) => {
-  return buildField(fieldConfig.name, fieldConfig.label, fieldConfig.readOnly, true);
+export const buildSwitch = (field) => {
+  return buildField(field.name, field.label, field.readOnly, true);
 };
-export const buildCheckBox = (fieldConfig) => {
-  return buildField(fieldConfig.name, fieldConfig.label, fieldConfig.readOnly, false);
+export 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" },

package/dist/collection/components/{ez-form/fieldbuilder/tpl → ez-form-view/fieldbuilder/templates}/ComboBox.tpl.js

@@ -1,6 +1,6 @@
 import { h } from "@stencil/core";
-export const buildComboBox = ({ name, label, readOnly, required }, properties) => {
-  const prop = properties === null || properties === void 0 ? void 0 : properties.options;
+export 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);