@sankhyalabs/ezui 1.1.78 → 1.1.81

package/dist/custom-elements/index.js

@@ -1128,11 +1128,7 @@ class AddedRecordsReducerImpl {
     reduce(_stateManager, currentState, action) {
         switch (action.type) {
             case Action.RECORDS_ADDED:
-                const newState = currentState ? currentState.slice() : [];
-                action.payload.forEach((r) => {
-                    newState.push(Object.assign({ __record__id__: "NEW_" + (newState.length + 1) }, r));
-                });
-                return newState;
+                return (currentState || []).concat(action.payload);
             case Action.DATA_SAVED:
             case Action.EDITION_CANCELED:
                 return undefined;
@@ -1144,6 +1140,10 @@ const AddedRecordsReducer = new AddedRecordsReducerImpl();
 const getAddedRecords = (stateManager) => {
     return stateManager.select(AddedRecordsReducer.sliceName, (state) => state);
 };
+const prepareAddedRecordId = (stateManager, source) => {
+    let index = (getAddedRecords(stateManager) || []).length;
+    return source.map(item => { return Object.assign(Object.assign({}, item), { __record__id__: "NEW_" + (index++) }); });
+};
 
 class ChangesReducerImpl {
     constructor() {
@@ -1156,7 +1156,9 @@ class ChangesReducerImpl {
                 if (selection) {
                     const newState = new Map(currentState);
                     selection.forEach(recordId => {
-                        newState.set(recordId, Object.assign(Object.assign({}, newState.get(recordId)), action.payload));
+                        const newChanges = Object.assign(Object.assign({}, newState.get(recordId)), action.payload);
+                        delete newChanges.records;
+                        newState.set(recordId, newChanges);
                     });
                     return newState;
                 }
@@ -1185,16 +1187,14 @@ const getChangesToSave = (dataUnit, stateManager) => {
     const result = [];
     const changes = getChanges(stateManager);
     const records = getRecords(stateManager);
-    if (records) {
-        records.forEach(r => {
-            if (changes) {
-                const c = changes.get(r.__record__id__);
-                if (c) {
-                    result.push(new Change(dataUnit, r, c, ChangeOperation.UPDATE));
-                }
+    records === null || records === void 0 ? void 0 : records.forEach(r => {
+        if (changes) {
+            const c = changes.get(r.__record__id__);
+            if (c) {
+                result.push(new Change(dataUnit, r, c, ChangeOperation.UPDATE));
             }
-        });
-    }
+        }
+    });
     const addedRecords = getAddedRecords(stateManager);
     if (addedRecords) {
         addedRecords.forEach(r => {
@@ -1203,7 +1203,7 @@ const getChangesToSave = (dataUnit, stateManager) => {
     }
     const removedRecords = getRemovedRecords(stateManager);
     const recordsById = {};
-    records.forEach(r => recordsById[r.__record__id__] = r);
+    records === null || records === void 0 ? void 0 : records.forEach(r => recordsById[r.__record__id__] = r);
     if (removedRecords) {
         removedRecords.forEach(id => {
             result.push(new Change(dataUnit, recordsById[id], undefined, ChangeOperation.DELETE));
@@ -1259,6 +1259,8 @@ class SelectionReducerImpl {
     }
     reduce(stateManager, currentState, action) {
         switch (action.type) {
+            case Action.RECORDS_ADDED:
+                return action.payload.map((r) => r.__record__id__);
             case Action.DATA_SAVED:
                 return updateSavedIds(stateManager, action.payload.records);
             case Action.RECORDS_REMOVED:
@@ -1360,7 +1362,16 @@ function updateSavedIds(stateManager, savedRecords) {
     return currentSelection;
 }
 
-class DataUnit$1 {
+var __awaiter = (undefined && undefined.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+class DataUnit {
     constructor(name) {
         this._name = name;
         this._stateManager = new StateManager([
@@ -1401,32 +1412,46 @@ class DataUnit$1 {
     }
     // Loaders
     loadMetadata() {
-        this.dispatchAction(Action.LOADING_METADATA);
-        if (this.metadataLoader) {
-            this.metadataLoader(this._name).then(metadata => this.metadata = metadata);
-        }
+        return __awaiter(this, void 0, void 0, function* () {
+            this.dispatchAction(Action.LOADING_METADATA);
+            return new Promise((resolve, fail) => {
+                if (this.metadataLoader) {
+                    this.metadataLoader(this._name).then(metadata => {
+                        this.metadata = metadata;
+                        resolve(this.metadata);
+                    }).catch(error => fail(error));
+                }
+            });
+        });
     }
     loadData() {
-        this.dispatchAction(Action.LOADING_DATA);
-        return new Promise((resolve, fail) => {
-            if (this.dataLoader) {
-                const sort = this.getSort();
-                const filters = this.getFilters();
-                this.dataLoader(this._name, sort, filters).then(records => {
-                    this.records = records;
-                    resolve(this.records);
-                }).catch(() => fail());
-            }
+        return __awaiter(this, void 0, void 0, function* () {
+            this.dispatchAction(Action.LOADING_DATA);
+            return new Promise((resolve, fail) => {
+                if (this.dataLoader) {
+                    const sort = this.getSort();
+                    const filters = this.getFilters();
+                    this.dataLoader(this._name, sort, filters).then(records => {
+                        this.records = records;
+                        resolve(this.records);
+                    }).catch(error => fail(error));
+                }
+            });
         });
     }
     saveData() {
-        const changes = getChangesToSave(this._name, this._stateManager);
-        if (changes.length > 0) {
-            this.dispatchAction(Action.SAVING_DATA);
-            if (this.saveLoader) {
-                this.saveLoader(this._name, changes).then(records => this.dispatchAction(Action.DATA_SAVED, { changes, records }));
+        return __awaiter(this, void 0, void 0, function* () {
+            const changes = getChangesToSave(this._name, this._stateManager);
+            if (changes.length > 0) {
+                this.dispatchAction(Action.SAVING_DATA);
+                return new Promise((resolve, fail) => {
+                    if (this.saveLoader) {
+                        this.saveLoader(this._name, changes).then(records => this.dispatchAction(Action.DATA_SAVED, { changes, records })).catch(error => fail(error));
+                    }
+                });
             }
-        }
+            return Promise.resolve();
+        });
     }
     // API
     addFilterProvider(provider) {
@@ -1452,7 +1477,7 @@ class DataUnit$1 {
         return getField(this._stateManager, fieldName);
     }
     addRecord() {
-        this.dispatchAction(Action.RECORDS_ADDED, [{}]);
+        this.dispatchAction(Action.RECORDS_ADDED, prepareAddedRecordId(this._stateManager, [{}]));
     }
     removeSelectedRecords() {
         const selection = getSelection(this._stateManager);
@@ -1525,9 +1550,9 @@ class DataUnit$1 {
 }
 var ChangeOperation;
 (function (ChangeOperation) {
-    ChangeOperation[ChangeOperation["INSERT"] = 0] = "INSERT";
-    ChangeOperation[ChangeOperation["UPDATE"] = 1] = "UPDATE";
-    ChangeOperation[ChangeOperation["DELETE"] = 2] = "DELETE";
+    ChangeOperation["INSERT"] = "INSERT";
+    ChangeOperation["UPDATE"] = "UPDATE";
+    ChangeOperation["DELETE"] = "DELETE";
 })(ChangeOperation || (ChangeOperation = {}));
 class Change {
     constructor(dataUnit, record, updates, operation) {
@@ -1536,6 +1561,9 @@ class Change {
         this.updatingFields = updates;
         this._operation = operation;
     }
+    get operation() {
+        return this._operation.toString();
+    }
     isInsert() {
         return this._operation === ChangeOperation.INSERT;
     }
@@ -1552,12 +1580,12 @@ var SortMode;
     SortMode["ASC"] = "ASC";
     SortMode["DESC"] = "DESC";
 })(SortMode || (SortMode = {}));
-var DependencyType$1;
+var DependencyType;
 (function (DependencyType) {
     DependencyType["SEARCHING"] = "SEARCHING";
     DependencyType["REQUIREMENT"] = "REQUIREMENT";
     DependencyType["VISIBILITY"] = "REQUIREMENT";
-})(DependencyType$1 || (DependencyType$1 = {}));
+})(DependencyType || (DependencyType = {}));
 var UserInterface;
 (function (UserInterface) {
     UserInterface["FILE"] = "FILE";
@@ -1591,10 +1619,6 @@ var LoadType;
 
 var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
 
-function getDefaultExportFromCjs (x) {
-	return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
-}
-
 function createCommonjsModule(fn, basedir, module) {
 	return module = {
 		path: basedir,
@@ -8609,58 +8633,211 @@ let EzDialog$1 = class extends HTMLElement$1 {
   static get style() { return ezDialogCss; }
 };
 
-function _defineProperty(obj, key, value) {
-  if (key in obj) {
-    Object.defineProperty(obj, key, {
-      value: value,
-      enumerable: true,
-      configurable: true,
-      writable: true
-    });
-  } else {
-    obj[key] = value;
-  }
+const buildTextArea = ({ name, label }) => {
+  return (h("div", { class: "col col--sd-12 padding--small", key: name },
+    h("ez-text-area", { label: label, "data-field-name": name })));
+};
+
+const buildTextInput = ({ name, label }) => {
+  return (h("div", { class: "col col--sd-12 col--tb-3 padding--small" },
+    h("ez-text-input", { label: label, "data-field-name": name, key: name })));
+};
 
-  return obj;
+const buildSwitch = (fieldConfig) => {
+  return buildField$1(fieldConfig.name, fieldConfig.label, true);
+};
+const buildCheckBox = (fieldConfig) => {
+  return buildField$1(fieldConfig.name, fieldConfig.label, false);
+};
+function buildField$1(fieldName, fieldLabel, switchMode = false) {
+  return (h("div", { class: "col col--sd-12 col--tb-3 padding--small align--middle padding-bottom--large" },
+    h("ez-check", { label: fieldLabel, mode: switchMode ? "switch" : "regular", "data-field-name": fieldName, key: fieldName })));
 }
 
-function ownKeys(object, enumerableOnly) {
-  var keys = Object.keys(object);
+const buildComboBox = ({ name, label }, 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: "col col--sd-12 col--tb-3 padding--small" },
+    h("ez-combo-box", { label: label, "data-field-name": name, key: name, options: options })));
+};
 
-  if (Object.getOwnPropertySymbols) {
-    var symbols = Object.getOwnPropertySymbols(object);
+const buildSearch = ({ name, label }) => {
+  return (h("div", { class: "col col--sd-12 col--tb-3 padding--small" },
+    h("ez-search", { label: label, optionLoader: (_argument) => { }, "data-field-name": name, key: name })));
+};
 
-    if (enumerableOnly) {
-      symbols = symbols.filter(function (sym) {
-        return Object.getOwnPropertyDescriptor(object, sym).enumerable;
-      });
-    }
+const buildFile = ({ name, label }) => {
+  return (h("div", { class: "col col--sd-12 padding--small" },
+    h("ez-upload", { label: label, urlUpload: "", requestHeaders: "", maxFiles: 10, "data-field-name": name, key: name })));
+};
 
-    keys.push.apply(keys, symbols);
-  }
+const buildDate = ({ name, label }) => {
+  return (h("div", { class: "col col--sd-12 col--tb-3 padding--small" },
+    h("ez-date-input", { label: label, "data-field-name": name, key: name })));
+};
+const buildTimeDate = ({ name, label }) => {
+  return (h("div", { class: "col col--sd-12 col--tb-3 padding--small" },
+    h("ez-date-time-input", { label: label, "data-field-name": name, key: name })));
+};
 
-  return keys;
+const buildDecimal = ({ name, label }, 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, precision, prettyPrecision);
+};
+const buildInteger = ({ name, label }) => {
+  return buildNumeric(name, label, 0, 0);
+};
+function buildNumeric(fieldName, fieldLabel, precision, prettyPrecision) {
+  return (h("div", { class: "col col--sd-12 col--tb-3 padding--small" },
+    h("ez-number-input", { label: fieldLabel, precision: precision, prettyPrecision: prettyPrecision, "data-field-name": fieldName, key: fieldName })));
 }
 
-function _objectSpread2(target) {
-  for (var i = 1; i < arguments.length; i++) {
-    var source = arguments[i] != null ? arguments[i] : {};
-
-    if (i % 2) {
-      ownKeys(Object(source), true).forEach(function (key) {
-        _defineProperty(target, key, source[key]);
-      });
-    } else if (Object.getOwnPropertyDescriptors) {
-      Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
-    } else {
-      ownKeys(Object(source)).forEach(function (key) {
-        Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
-      });
+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.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) {
+    builder = uiBuilders.get(descriptor.userInterface);
+    if (!config.label) {
+      config.label = descriptor.label;
+    }
+    if (!config.name) {
+      config.name = descriptor.name;
+    }
+    if (config.required === undefined) {
+      config.required = descriptor.required;
     }
+    props = descriptor.properties;
   }
+  if (config.required) {
+    config.label = `* ${config.label} (obrigatório)`;
+  }
+  if (!builder) {
+    builder = buildTextInput;
+  }
+  return builder(config, props);
+};
 
-  return target;
+const FormItem = ({ source }) => {
+  if ("items" in source) {
+    const fieldSet = source;
+    return h("ez-collapsible-box", { label: source.label }, fieldSet.items.map(fi => buildField(fi)));
+  }
+  else {
+    return buildField(source);
+  }
+};
+
+const FormSheet = ({ store, source }) => {
+  return (h("div", { class: "box__container" }, source.items.map(item => h(FormItem, { store: store, source: item }))));
+};
+
+class FormMetadata {
+  constructor() {
+    this._sheets = new Map();
+    this._requiredFields = [];
+  }
+  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);
+  }
+  getRequiredFields() {
+    return this._requiredFields;
+  }
 }
+const buildFromDataUnit = (dataUnit) => {
+  var _a;
+  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);
+    metadata.addSheet({
+      label: unitMD.label,
+      name: unitMD.name,
+      items: visibleFields.map(descriptor => { return { descriptor }; }),
+      requiredFields: visibleFields
+        .filter(descriptor => descriptor.required)
+        .map(descriptor => descriptor.name)
+    });
+  }
+  return metadata;
+};
+const buildFromConfig = (fields, dataUnit) => {
+  const sheets = new Map();
+  const requiredFields = [];
+  fields.forEach(config => {
+    if (config.visible !== false) {
+      const tab = config.tab || "Geral";
+      const descriptor = dataUnit.getField(config.name);
+      if (!sheets.has(tab)) {
+        sheets.set(tab, new Map());
+      }
+      let isRequired = false;
+      if (config.required === undefined) {
+        if (descriptor) {
+          isRequired = descriptor.required;
+        }
+      }
+      else {
+        isRequired = config.required;
+      }
+      if (isRequired) {
+        requiredFields.push(config.name);
+      }
+      const tabItens = sheets.get(tab);
+      const fieldMD = { config, descriptor };
+      const group = config.group;
+      if (group) {
+        const key = `group::${group}`;
+        if (!tabItens.has(key)) {
+          tabItens.set(key, { label: group, items: [fieldMD] });
+        }
+        else {
+          tabItens.get(key).items.push(fieldMD);
+        }
+      }
+      else {
+        tabItens.set(config.name, fieldMD);
+      }
+    }
+  });
+  const metadata = new FormMetadata();
+  sheets.forEach((value, key) => {
+    metadata.addSheet({
+      label: key,
+      name: key,
+      items: Array.from(value.values()),
+      requiredFields
+    });
+  });
+  return metadata;
+};
 
 /**
  * Adapted from React: https://github.com/facebook/react/blob/master/packages/shared/formatProdErrorMessage.js
@@ -8985,1145 +9162,94 @@ function createStore(reducer, preloadedState, enhancer) {
   }, _ref2[$$observable] = observable, _ref2;
 }
 
-function assertReducerShape(reducers) {
-  Object.keys(reducers).forEach(function (key) {
-    var reducer = reducers[key];
-    var initialState = reducer(undefined, {
-      type: ActionTypes.INIT
-    });
-
-    if (typeof initialState === 'undefined') {
-      throw new Error(formatProdErrorMessage(12) );
-    }
-
-    if (typeof reducer(undefined, {
-      type: ActionTypes.PROBE_UNKNOWN_ACTION()
-    }) === 'undefined') {
-      throw new Error(formatProdErrorMessage(13) );
-    }
-  });
-}
-/**
- * Turns an object whose values are different reducer functions, into a single
- * reducer function. It will call every child reducer, and gather their results
- * into a single state object, whose keys correspond to the keys of the passed
- * reducer functions.
- *
- * @param {Object} reducers An object whose values correspond to different
- * reducer functions that need to be combined into one. One handy way to obtain
- * it is to use ES6 `import * as reducers` syntax. The reducers may never return
- * undefined for any action. Instead, they should return their initial state
- * if the state passed to them was undefined, and the current state for any
- * unrecognized action.
- *
- * @returns {Function} A reducer function that invokes every reducer inside the
- * passed object, and builds a state object with the same shape.
- */
-
-
-function combineReducers(reducers) {
-  var reducerKeys = Object.keys(reducers);
-  var finalReducers = {};
-
-  for (var i = 0; i < reducerKeys.length; i++) {
-    var key = reducerKeys[i];
-
-    if (typeof reducers[key] === 'function') {
-      finalReducers[key] = reducers[key];
-    }
-  }
-
-  var finalReducerKeys = Object.keys(finalReducers); // This is used to make sure we don't warn about the same
-
-  var shapeAssertionError;
-
-  try {
-    assertReducerShape(finalReducers);
-  } catch (e) {
-    shapeAssertionError = e;
-  }
-
-  return function combination(state, action) {
-    if (state === void 0) {
-      state = {};
-    }
-
-    if (shapeAssertionError) {
-      throw shapeAssertionError;
-    }
-
-    var hasChanged = false;
-    var nextState = {};
-
-    for (var _i = 0; _i < finalReducerKeys.length; _i++) {
-      var _key = finalReducerKeys[_i];
-      var reducer = finalReducers[_key];
-      var previousStateForKey = state[_key];
-      var nextStateForKey = reducer(previousStateForKey, action);
-
-      if (typeof nextStateForKey === 'undefined') {
-        throw new Error(formatProdErrorMessage(14) );
-      }
-
-      nextState[_key] = nextStateForKey;
-      hasChanged = hasChanged || nextStateForKey !== previousStateForKey;
-    }
-
-    hasChanged = hasChanged || finalReducerKeys.length !== Object.keys(state).length;
-    return hasChanged ? nextState : state;
-  };
-}
-
-/**
- * Composes single-argument functions from right to left. The rightmost
- * function can take multiple arguments as it provides the signature for
- * the resulting composite function.
- *
- * @param {...Function} funcs The functions to compose.
- * @returns {Function} A function obtained by composing the argument functions
- * from right to left. For example, compose(f, g, h) is identical to doing
- * (...args) => f(g(h(...args))).
- */
-function compose() {
-  for (var _len = arguments.length, funcs = new Array(_len), _key = 0; _key < _len; _key++) {
-    funcs[_key] = arguments[_key];
-  }
-
-  if (funcs.length === 0) {
-    return function (arg) {
-      return arg;
-    };
-  }
-
-  if (funcs.length === 1) {
-    return funcs[0];
-  }
-
-  return funcs.reduce(function (a, b) {
-    return function () {
-      return a(b.apply(void 0, arguments));
-    };
-  });
-}
-
-/**
- * Creates a store enhancer that applies middleware to the dispatch method
- * of the Redux store. This is handy for a variety of tasks, such as expressing
- * asynchronous actions in a concise manner, or logging every action payload.
- *
- * See `redux-thunk` package as an example of the Redux middleware.
- *
- * Because middleware is potentially asynchronous, this should be the first
- * store enhancer in the composition chain.
- *
- * Note that each middleware will be given the `dispatch` and `getState` functions
- * as named arguments.
- *
- * @param {...Function} middlewares The middleware chain to be applied.
- * @returns {Function} A store enhancer applying the middleware.
- */
-
-function applyMiddleware() {
-  for (var _len = arguments.length, middlewares = new Array(_len), _key = 0; _key < _len; _key++) {
-    middlewares[_key] = arguments[_key];
+const inicialState = {};
+///////////////////////////////     REDUCERS     ///////////////////////////////
+function formReducer(state = inicialState, action) {
+  switch (action.type) {
+    case FormActions.METADATA_LOADED:
+      return Object.assign(Object.assign({}, state), { formMetadata: action.payload });
+    case FormActions.CHANGE_TAB:
+      return Object.assign(Object.assign({}, state), { currentSheet: action.payload });
+    default:
+      return state;
   }
-
-  return function (createStore) {
-    return function () {
-      var store = createStore.apply(void 0, arguments);
-
-      var _dispatch = function dispatch() {
-        throw new Error(formatProdErrorMessage(15) );
-      };
-
-      var middlewareAPI = {
-        getState: store.getState,
-        dispatch: function dispatch() {
-          return _dispatch.apply(void 0, arguments);
-        }
-      };
-      var chain = middlewares.map(function (middleware) {
-        return middleware(middlewareAPI);
-      });
-      _dispatch = compose.apply(void 0, chain)(store.dispatch);
-      return _objectSpread2(_objectSpread2({}, store), {}, {
-        dispatch: _dispatch
-      });
-    };
-  };
-}
-
-/** A function that accepts a potential "extra argument" value to be injected later,
- * and returns an instance of the thunk middleware that uses that value
- */
-function createThunkMiddleware(extraArgument) {
-  // Standard Redux middleware definition pattern:
-  // See: https://redux.js.org/tutorials/fundamentals/part-4-store#writing-custom-middleware
-  var middleware = function middleware(_ref) {
-    var dispatch = _ref.dispatch,
-        getState = _ref.getState;
-    return function (next) {
-      return function (action) {
-        // The thunk middleware looks for any functions that were passed to `store.dispatch`.
-        // If this "action" is really a function, call it and return the result.
-        if (typeof action === 'function') {
-          // Inject the store's `dispatch` and `getState` methods, as well as any "extra arg"
-          return action(dispatch, getState, extraArgument);
-        } // Otherwise, pass the action down the middleware chain as usual
-
-
-        return next(action);
-      };
-    };
-  };
-
-  return middleware;
-}
-
-var thunk = createThunkMiddleware(); // Attach the factory function so users can create a customized version
-// with whatever "extra arg" they want to inject into their thunks
-
-thunk.withExtraArgument = createThunkMiddleware;
-
-function changeFieldValue$1(dataUnit, recordId, fieldName, value) {
-  return {
-    type: "FORM/CHANGEFIELD",
-    payload: { dataUnit, recordId, fieldName, value }
-  };
-}
-function changeTab$1(formId, index) {
-  return {
-    type: "FORM/CHANGETAB",
-    payload: { formId, index }
-  };
-}
-function clearEdition$1(dataUnit, recordsLimit) {
-  return {
-    type: "FORM/CLEAREDITION",
-    payload: {
-      dataUnit,
-      recordsLimit
-    }
-  };
-}
-function collapseExpandGroup(collapseId, collapsed) {
-  return {
-    type: "FORM/COLLAPSEGROUP",
-    payload: { collapseId, collapsed }
-  };
-}
-function previousRecord(dataUnit) {
-  return {
-    type: "FORM/NAVIGATE",
-    payload: {
-      dataUnit,
-      limit: 0,
-      backward: true
-    }
-  };
-}
-function nextRecord(dataUnit, limit) {
-  return {
-    type: "FORM/NAVIGATE",
-    payload: {
-      dataUnit,
-      limit,
-      backward: false
-    }
-  };
-}
-function insertRecord$1(dataUnit, insertionIndex) {
-  return {
-    type: "FORM/INSERT",
-    payload: {
-      dataUnit,
-      insertionIndex
-    }
-  };
-}
-function formLoad() {
-  return {
-    type: "FORM/LOAD"
-  };
-}
-function dataLoading$1(dataUnit) {
-  return {
-    type: "FORM/DATALOADING",
-    payload: {
-      dataUnit
-    }
-  };
-}
-function savingChanges$1(dataUnit) {
-  return {
-    type: "FORM/SAVINGCHANGES",
-    payload: {
-      dataUnit
-    }
-  };
-}
-function dataLoaded$1(dataUnit) {
-  return {
-    type: "FORM/DATALOADED",
-    payload: {
-      dataUnit
-    }
-  };
-}
-function changesSaved$1(dataUnit) {
-  return {
-    type: "FORM/CHANGESSAVED",
-    payload: {
-      dataUnit
-    }
-  };
-}
-function removingRecord$1(dataUnit) {
-  return {
-    type: "FORM/REMOVINGRECORD",
-    payload: {
-      dataUnit
-    }
-  };
-}
-function recordRemoved$1(dataUnit) {
-  return {
-    type: "FORM/RECORDREMOVED",
-    payload: {
-      dataUnit
-    }
-  };
 }
-function invalidField$1(tabController, tabIndex, dataUnit, recordIndex, recordId, fieldName, errorMessage) {
+/////////////////////////////// ACTION CREATORS ///////////////////////////////
+function loadMetadata(formMetadata) {
   return {
-    type: "FORM/INVALIDFIELD",
-    payload: {
-      tabController,
-      tabIndex,
-      dataUnit,
-      recordId,
-      recordIndex,
-      fieldName,
-      errorMessage
-    }
+    type: FormActions.METADATA_LOADED,
+    payload: formMetadata
   };
 }
-function showHideNavigationButtons(buttonName, status) {
+function changeTab(currentSheet) {
   return {
-    type: "FORM/SHOWHIDENAVBTN",
-    payload: {
-      buttonName,
-      status
-    }
+    type: FormActions.CHANGE_TAB,
+    payload: currentSheet
   };
 }
-
-var actions = createCommonjsModule(function (module, exports) {
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.ActionCreators = exports.ActionTypes = void 0;
-var ActionTypes = {
-  UNDO: '@@redux-undo/UNDO',
-  REDO: '@@redux-undo/REDO',
-  JUMP_TO_FUTURE: '@@redux-undo/JUMP_TO_FUTURE',
-  JUMP_TO_PAST: '@@redux-undo/JUMP_TO_PAST',
-  JUMP: '@@redux-undo/JUMP',
-  CLEAR_HISTORY: '@@redux-undo/CLEAR_HISTORY'
-};
-exports.ActionTypes = ActionTypes;
-var ActionCreators = {
-  undo: function undo() {
-    return {
-      type: ActionTypes.UNDO
-    };
-  },
-  redo: function redo() {
-    return {
-      type: ActionTypes.REDO
-    };
-  },
-  jumpToFuture: function jumpToFuture(index) {
-    return {
-      type: ActionTypes.JUMP_TO_FUTURE,
-      index: index
-    };
-  },
-  jumpToPast: function jumpToPast(index) {
-    return {
-      type: ActionTypes.JUMP_TO_PAST,
-      index: index
-    };
-  },
-  jump: function jump(index) {
-    return {
-      type: ActionTypes.JUMP,
-      index: index
-    };
-  },
-  clearHistory: function clearHistory() {
-    return {
-      type: ActionTypes.CLEAR_HISTORY
-    };
-  }
-};
-exports.ActionCreators = ActionCreators;
-});
-
-var helpers = createCommonjsModule(function (module, exports) {
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.parseActions = parseActions;
-exports.isHistory = isHistory;
-exports.includeAction = includeAction;
-exports.excludeAction = excludeAction;
-exports.combineFilters = combineFilters;
-exports.groupByActionTypes = groupByActionTypes;
-exports.newHistory = newHistory;
-
-// parseActions helper: takes a string (or array)
-//                      and makes it an array if it isn't yet
-function parseActions(rawActions) {
-  var defaultValue = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
-
-  if (Array.isArray(rawActions)) {
-    return rawActions;
-  } else if (typeof rawActions === 'string') {
-    return [rawActions];
-  }
-
-  return defaultValue;
-} // isHistory helper: check for a valid history object
-
-
-function isHistory(history) {
-  return typeof history.present !== 'undefined' && typeof history.future !== 'undefined' && typeof history.past !== 'undefined' && Array.isArray(history.future) && Array.isArray(history.past);
-} // includeAction helper: whitelist actions to be added to the history
-
-
-function includeAction(rawActions) {
-  var actions = parseActions(rawActions);
-  return function (action) {
-    return actions.indexOf(action.type) >= 0;
-  };
-} // excludeAction helper: blacklist actions from being added to the history
-
-
-function excludeAction(rawActions) {
-  var actions = parseActions(rawActions);
-  return function (action) {
-    return actions.indexOf(action.type) < 0;
-  };
-} // combineFilters helper: combine multiple filters to one
-
-
-function combineFilters() {
-  for (var _len = arguments.length, filters = new Array(_len), _key = 0; _key < _len; _key++) {
-    filters[_key] = arguments[_key];
-  }
-
-  return filters.reduce(function (prev, curr) {
-    return function (action, currentState, previousHistory) {
-      return prev(action, currentState, previousHistory) && curr(action, currentState, previousHistory);
-    };
-  }, function () {
-    return true;
-  });
+///////////////////////////////    SELECTORS    ///////////////////////////////
+function selectFormMetadata(state) {
+  return state.formMetadata;
 }
-
-function groupByActionTypes(rawActions) {
-  var actions = parseActions(rawActions);
-  return function (action) {
-    return actions.indexOf(action.type) >= 0 ? action.type : null;
-  };
+function selectCurrentSheet(state) {
+  return state.currentSheet ? state.formMetadata.getSheet(state.currentSheet) : 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 = {}));
 
-function newHistory(past, present, future) {
-  var group = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : null;
-  return {
-    past: past,
-    present: present,
-    future: future,
-    group: group,
-    _latestUnfiltered: present,
-    index: past.length,
-    limit: past.length + future.length + 1
-  };
-}
-});
-
-var debug = createCommonjsModule(function (module, exports) {
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.set = set;
-exports.start = start;
-exports.end = end;
-exports.log = log;
-
-function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _nonIterableSpread(); }
-
-function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance"); }
-
-function _iterableToArray(iter) { if (Symbol.iterator in Object(iter) || Object.prototype.toString.call(iter) === "[object Arguments]") return Array.from(iter); }
-
-function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = new Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } }
-
-var __DEBUG__;
-
-var displayBuffer;
-var colors = {
-  prevState: '#9E9E9E',
-  action: '#03A9F4',
-  nextState: '#4CAF50'
-};
-/* istanbul ignore next: debug messaging is not tested */
-
-function initBuffer() {
-  displayBuffer = {
-    header: [],
-    prev: [],
-    action: [],
-    next: [],
-    msgs: []
-  };
-}
-/* istanbul ignore next: debug messaging is not tested */
-
-
-function printBuffer() {
-  var _displayBuffer = displayBuffer,
-      header = _displayBuffer.header,
-      prev = _displayBuffer.prev,
-      next = _displayBuffer.next,
-      action = _displayBuffer.action,
-      msgs = _displayBuffer.msgs;
-
-  if (console.group) {
-    var _console, _console2, _console3, _console4, _console5;
-
-    (_console = console).groupCollapsed.apply(_console, _toConsumableArray(header));
-
-    (_console2 = console).log.apply(_console2, _toConsumableArray(prev));
-
-    (_console3 = console).log.apply(_console3, _toConsumableArray(action));
-
-    (_console4 = console).log.apply(_console4, _toConsumableArray(next));
-
-    (_console5 = console).log.apply(_console5, _toConsumableArray(msgs));
-
-    console.groupEnd();
-  } else {
-    var _console6, _console7, _console8, _console9, _console10;
-
-    (_console6 = console).log.apply(_console6, _toConsumableArray(header));
-
-    (_console7 = console).log.apply(_console7, _toConsumableArray(prev));
-
-    (_console8 = console).log.apply(_console8, _toConsumableArray(action));
-
-    (_console9 = console).log.apply(_console9, _toConsumableArray(next));
-
-    (_console10 = console).log.apply(_console10, _toConsumableArray(msgs));
+class DataBinder {
+  constructor(dataUnit) {
+    this._fields = new Map();
+    this._dataUnit = dataUnit;
+    this._dataUnit.subscribe(_action => {
+      var _a;
+      (_a = this._fields) === null || _a === void 0 ? void 0 : _a.forEach(field => {
+        this.updateValue(field.fieldName, field.field);
+      });
+    });
   }
-}
-/* istanbul ignore next: debug messaging is not tested */
-
-
-function colorFormat(text, color, obj) {
-  return ["%c".concat(text), "color: ".concat(color, "; font-weight: bold"), obj];
-}
-/* istanbul ignore next: debug messaging is not tested */
-
-
-function start(action, state) {
-  initBuffer();
-
-  if (__DEBUG__) {
-    if (console.group) {
-      displayBuffer.header = ['%credux-undo', 'font-style: italic', 'action', action.type];
-      displayBuffer.action = colorFormat('action', colors.action, action);
-      displayBuffer.prev = colorFormat('prev history', colors.prevState, state);
-    } else {
-      displayBuffer.header = ['redux-undo action', action.type];
-      displayBuffer.action = ['action', action];
-      displayBuffer.prev = ['prev history', state];
-    }
+  bind(fields) {
+    fields.forEach(fieldElement => {
+      const fieldName = fieldElement.dataset.fieldName;
+      this.updateBind(fieldName, fieldElement);
+      this.updateValue(fieldName, fieldElement);
+    });
   }
-}
-/* istanbul ignore next: debug messaging is not tested */
-
-
-function end(nextState) {
-  if (__DEBUG__) {
-    if (console.group) {
-      displayBuffer.next = colorFormat('next history', colors.nextState, nextState);
-    } else {
-      displayBuffer.next = ['next history', nextState];
-    }
-
-    printBuffer();
+  updateValue(fieldName, field) {
+    field["value"] = this._dataUnit.getFieldValue(fieldName);
   }
-}
-/* istanbul ignore next: debug messaging is not tested */
-
-
-function log() {
-  if (__DEBUG__) {
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
+  updateBind(fieldName, field) {
+    const oldBind = this._fields.get(fieldName);
+    if (oldBind) {
+      oldBind.destroy();
     }
-
-    displayBuffer.msgs = displayBuffer.msgs.concat([].concat(args, ['\n']));
+    this._fields.set(fieldName, Bind.create(fieldName, field, (fieldName, newValue) => this.setFieldValue(fieldName, newValue)));
   }
-}
-/* istanbul ignore next: debug messaging is not tested */
-
-
-function set(debug) {
-  __DEBUG__ = debug;
-}
-});
-
-var reducer = createCommonjsModule(function (module, exports) {
-
-function _typeof(obj) { if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports["default"] = undoable;
-
-var debug$1 = _interopRequireWildcard(debug);
-
-
-
-
-
-function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }
-
-function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
-
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
-
-function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-
-function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _nonIterableSpread(); }
-
-function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance"); }
-
-function _iterableToArray(iter) { if (Symbol.iterator in Object(iter) || Object.prototype.toString.call(iter) === "[object Arguments]") return Array.from(iter); }
-
-function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = new Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } }
-
-function createHistory(state, ignoreInitialState) {
-  // ignoreInitialState essentially prevents the user from undoing to the
-  // beginning, in the case that the undoable reducer handles initialization
-  // in a way that can't be redone simply
-  var history = (0, helpers.newHistory)([], state, []);
-
-  if (ignoreInitialState) {
-    history._latestUnfiltered = null;
-  }
-
-  return history;
-} // insert: insert `state` into history, which means adding the current state
-//         into `past`, setting the new `state` as `present` and erasing
-//         the `future`.
-
-
-function insert(history, state, limit, group) {
-  var lengthWithoutFuture = history.past.length + 1;
-  debug$1.log('inserting', state);
-  debug$1.log('new free: ', limit - lengthWithoutFuture);
-  var past = history.past,
-      _latestUnfiltered = history._latestUnfiltered;
-  var isHistoryOverflow = limit && limit <= lengthWithoutFuture;
-  var pastSliced = past.slice(isHistoryOverflow ? 1 : 0);
-  var newPast = _latestUnfiltered != null ? [].concat(_toConsumableArray(pastSliced), [_latestUnfiltered]) : pastSliced;
-  return (0, helpers.newHistory)(newPast, state, [], group);
-} // jumpToFuture: jump to requested index in future history
-
-
-function jumpToFuture(history, index) {
-  if (index < 0 || index >= history.future.length) return history;
-  var past = history.past,
-      future = history.future,
-      _latestUnfiltered = history._latestUnfiltered;
-  var newPast = [].concat(_toConsumableArray(past), [_latestUnfiltered], _toConsumableArray(future.slice(0, index)));
-  var newPresent = future[index];
-  var newFuture = future.slice(index + 1);
-  return (0, helpers.newHistory)(newPast, newPresent, newFuture);
-} // jumpToPast: jump to requested index in past history
-
-
-function jumpToPast(history, index) {
-  if (index < 0 || index >= history.past.length) return history;
-  var past = history.past,
-      future = history.future,
-      _latestUnfiltered = history._latestUnfiltered;
-  var newPast = past.slice(0, index);
-  var newFuture = [].concat(_toConsumableArray(past.slice(index + 1)), [_latestUnfiltered], _toConsumableArray(future));
-  var newPresent = past[index];
-  return (0, helpers.newHistory)(newPast, newPresent, newFuture);
-} // jump: jump n steps in the past or forward
-
-
-function jump(history, n) {
-  if (n > 0) return jumpToFuture(history, n - 1);
-  if (n < 0) return jumpToPast(history, history.past.length + n);
-  return history;
-} // helper to dynamically match in the reducer's switch-case
-
-
-function actionTypeAmongClearHistoryType(actionType, clearHistoryType) {
-  return clearHistoryType.indexOf(actionType) > -1 ? actionType : !actionType;
-} // redux-undo higher order reducer
-
-
-function undoable(reducer) {
-  var rawConfig = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-  debug$1.set(rawConfig.debug);
-
-  var config = _objectSpread({
-    limit: undefined,
-    filter: function filter() {
-      return true;
-    },
-    groupBy: function groupBy() {
-      return null;
-    },
-    undoType: actions.ActionTypes.UNDO,
-    redoType: actions.ActionTypes.REDO,
-    jumpToPastType: actions.ActionTypes.JUMP_TO_PAST,
-    jumpToFutureType: actions.ActionTypes.JUMP_TO_FUTURE,
-    jumpType: actions.ActionTypes.JUMP,
-    neverSkipReducer: false,
-    ignoreInitialState: false,
-    syncFilter: false
-  }, rawConfig, {
-    initTypes: (0, helpers.parseActions)(rawConfig.initTypes, ['@@redux-undo/INIT']),
-    clearHistoryType: (0, helpers.parseActions)(rawConfig.clearHistoryType, [actions.ActionTypes.CLEAR_HISTORY])
-  }); // Allows the user to call the reducer with redux-undo specific actions
-
-
-  var skipReducer = config.neverSkipReducer ? function (res, action) {
-    for (var _len = arguments.length, slices = new Array(_len > 2 ? _len - 2 : 0), _key = 2; _key < _len; _key++) {
-      slices[_key - 2] = arguments[_key];
-    }
-
-    return _objectSpread({}, res, {
-      present: reducer.apply(void 0, [res.present, action].concat(slices))
-    });
-  } : function (res) {
-    return res;
-  };
-  var initialState;
-  return function () {
-    var state = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : initialState;
-    var action = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-    debug$1.start(action, state);
-    var history = state;
-
-    for (var _len2 = arguments.length, slices = new Array(_len2 > 2 ? _len2 - 2 : 0), _key2 = 2; _key2 < _len2; _key2++) {
-      slices[_key2 - 2] = arguments[_key2];
-    }
-
-    if (!initialState) {
-      debug$1.log('history is uninitialized');
-
-      if (state === undefined) {
-        var createHistoryAction = {
-          type: '@@redux-undo/CREATE_HISTORY'
-        };
-        var start = reducer.apply(void 0, [state, createHistoryAction].concat(slices));
-        history = createHistory(start, config.ignoreInitialState);
-        debug$1.log('do not set initialState on probe actions');
-        debug$1.end(history);
-        return history;
-      } else if ((0, helpers.isHistory)(state)) {
-        history = initialState = config.ignoreInitialState ? state : (0, helpers.newHistory)(state.past, state.present, state.future);
-        debug$1.log('initialHistory initialized: initialState is a history', initialState);
-      } else {
-        history = initialState = createHistory(state, config.ignoreInitialState);
-        debug$1.log('initialHistory initialized: initialState is not a history', initialState);
-      }
-    }
-
-    var res;
-
-    switch (action.type) {
-      case undefined:
-        return history;
-
-      case config.undoType:
-        res = jump(history, -1);
-        debug$1.log('perform undo');
-        debug$1.end(res);
-        return skipReducer.apply(void 0, [res, action].concat(slices));
-
-      case config.redoType:
-        res = jump(history, 1);
-        debug$1.log('perform redo');
-        debug$1.end(res);
-        return skipReducer.apply(void 0, [res, action].concat(slices));
-
-      case config.jumpToPastType:
-        res = jumpToPast(history, action.index);
-        debug$1.log("perform jumpToPast to ".concat(action.index));
-        debug$1.end(res);
-        return skipReducer.apply(void 0, [res, action].concat(slices));
-
-      case config.jumpToFutureType:
-        res = jumpToFuture(history, action.index);
-        debug$1.log("perform jumpToFuture to ".concat(action.index));
-        debug$1.end(res);
-        return skipReducer.apply(void 0, [res, action].concat(slices));
-
-      case config.jumpType:
-        res = jump(history, action.index);
-        debug$1.log("perform jump to ".concat(action.index));
-        debug$1.end(res);
-        return skipReducer.apply(void 0, [res, action].concat(slices));
-
-      case actionTypeAmongClearHistoryType(action.type, config.clearHistoryType):
-        res = createHistory(history.present, config.ignoreInitialState);
-        debug$1.log('perform clearHistory');
-        debug$1.end(res);
-        return skipReducer.apply(void 0, [res, action].concat(slices));
-
-      default:
-        res = reducer.apply(void 0, [history.present, action].concat(slices));
-
-        if (config.initTypes.some(function (actionType) {
-          return actionType === action.type;
-        })) {
-          debug$1.log('reset history due to init action');
-          debug$1.end(initialState);
-          return initialState;
-        }
-
-        if (history._latestUnfiltered === res) {
-          // Don't handle this action. Do not call debug.end here,
-          // because this action should not produce side effects to the console
-          return history;
-        }
-        /* eslint-disable-next-line no-case-declarations */
-
-
-        var filtered = typeof config.filter === 'function' && !config.filter(action, res, history);
-
-        if (filtered) {
-          // if filtering an action, merely update the present
-          var filteredState = (0, helpers.newHistory)(history.past, res, history.future, history.group);
-
-          if (!config.syncFilter) {
-            filteredState._latestUnfiltered = history._latestUnfiltered;
-          }
-
-          debug$1.log('filter ignored action, not storing it in past');
-          debug$1.end(filteredState);
-          return filteredState;
-        }
-        /* eslint-disable-next-line no-case-declarations */
-
-
-        var group = config.groupBy(action, res, history);
-
-        if (group != null && group === history.group) {
-          // if grouping with the previous action, only update the present
-          var groupedState = (0, helpers.newHistory)(history.past, res, history.future, history.group);
-          debug$1.log('groupBy grouped the action with the previous action');
-          debug$1.end(groupedState);
-          return groupedState;
-        } // If the action wasn't filtered or grouped, insert normally
-
-
-        history = insert(history, res, config.limit, group);
-        debug$1.log('inserted new state into history');
-        debug$1.end(history);
-        return history;
+  setFieldValue(fieldName, newValue) {
+    if (this._dataUnit.records.length === 0) {
+      this._dataUnit.addRecord();
     }
-  };
-}
-});
-
-var lib = createCommonjsModule(function (module, exports) {
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-Object.defineProperty(exports, "ActionTypes", {
-  enumerable: true,
-  get: function get() {
-    return actions.ActionTypes;
-  }
-});
-Object.defineProperty(exports, "ActionCreators", {
-  enumerable: true,
-  get: function get() {
-    return actions.ActionCreators;
-  }
-});
-Object.defineProperty(exports, "parseActions", {
-  enumerable: true,
-  get: function get() {
-    return helpers.parseActions;
-  }
-});
-Object.defineProperty(exports, "isHistory", {
-  enumerable: true,
-  get: function get() {
-    return helpers.isHistory;
-  }
-});
-Object.defineProperty(exports, "includeAction", {
-  enumerable: true,
-  get: function get() {
-    return helpers.includeAction;
-  }
-});
-Object.defineProperty(exports, "excludeAction", {
-  enumerable: true,
-  get: function get() {
-    return helpers.excludeAction;
-  }
-});
-Object.defineProperty(exports, "combineFilters", {
-  enumerable: true,
-  get: function get() {
-    return helpers.combineFilters;
-  }
-});
-Object.defineProperty(exports, "groupByActionTypes", {
-  enumerable: true,
-  get: function get() {
-    return helpers.groupByActionTypes;
-  }
-});
-Object.defineProperty(exports, "newHistory", {
-  enumerable: true,
-  get: function get() {
-    return helpers.newHistory;
-  }
-});
-Object.defineProperty(exports, "default", {
-  enumerable: true,
-  get: function get() {
-    return _reducer["default"];
-  }
-});
-
-
-
-
-
-var _reducer = _interopRequireDefault(reducer);
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-});
-
-const undoable = /*@__PURE__*/getDefaultExportFromCjs(lib);
-
-const inicialHistState = {
-  currentTabIndex: {},
-  currentRecordIndex: {},
-  changes: {},
-  collapsedGroups: {},
-  newRecordIndex: {}
-};
-const inicialNonHistState = {
-  dataLoading: {},
-  invalidFields: {},
-  visibleButtons: {
-    previousVisible: true,
-    nextVisible: true,
-    addVisible: true,
-    removeVisible: true,
-    saveVisible: true,
-    cancelVisible: true,
-    reloadVisible: false
-  }
-};
-function formReducer(state = inicialHistState, action) {
-  switch (action.type) {
-    case "FORM/COLLAPSEGROUP":
-      return collapseGroup(state, action.payload);
-    case "FORM/CHANGETAB":
-      return changeTab(state, action.payload.formId, action.payload.index);
-    case "FORM/NAVIGATE":
-      return navigate(state, action.payload);
-    case "FORM/INSERT":
-      return insertRecord(state, action.payload);
-    case "FORM/CHANGEFIELD":
-      return changeFieldValue(state, action.payload);
-    case "FORM/CLEAREDITION":
-      return clearEdition(state, action.payload);
-    case "FORM/INVALIDFIELD":
-      return navigateToInvalid(state, action.payload);
-    default:
-      return state;
+    this._dataUnit.setFieldValue(fieldName, newValue);
   }
 }
-function formNonHistoricReducer(state = inicialNonHistState, action) {
-  switch (action.type) {
-    case "FORM/DATALOADING":
-      return dataLoading(state, action.payload);
-    case "FORM/DATALOADED":
-      return dataLoaded(state, action.payload);
-    case "FORM/SAVINGCHANGES":
-      return savingChanges(state, action.payload);
-    case "FORM/CHANGESSAVED":
-      return changesSaved(state, action.payload);
-    case "FORM/REMOVINGRECORD":
-      return removingRecord(state, action.payload);
-    case "FORM/RECORDREMOVED":
-      return recordRemoved(state, action.payload);
-    case "FORM/INVALIDFIELD":
-      return invalidField(state, action.payload);
-    case "FORM/CLEAREDITION":
-      return clearAllInvalidFields(state, action.payload);
-    case "FORM/CHANGEFIELD":
-      return clearInvalidField(state, action.payload);
-    case "FORM/SHOWHIDENAVBTN":
-      return showHideNavBtn(state, action.payload);
-    default:
-      return state;
+class Bind {
+  destroy() {
+    this.field.removeEventListener(this.eventName, this.eventListener);
   }
-}
-function collapseGroup(state, { collapseId, collapsed }) {
-  const currentCollapsed = Object.assign({}, state.collapsedGroups);
-  if (collapsed) {
-    currentCollapsed[collapseId] = true;
+  static create(fieldName, field, callback) {
+    const b = new Bind();
+    b.fieldName = fieldName;
+    b.field = field;
+    //FIXME: Verificar se o field é um EzField
+    b.eventListener = (evt) => { callback(fieldName, evt.detail); };
+    b.eventName = "ezChange";
+    b.field.addEventListener(b.eventName, b.eventListener);
+    return b;
   }
-  else {
-    delete currentCollapsed[collapseId];
-  }
-  return Object.assign(Object.assign({}, state), { collapsedGroups: currentCollapsed });
-}
-function changeTab(state, formId, index) {
-  const currentTabIndex = Object.assign({}, state.currentTabIndex);
-  currentTabIndex[formId] = index;
-  return Object.assign(Object.assign({}, state), { currentTabIndex });
-}
-function navigate(state, { dataUnit, limit, backward }) {
-  const currentRecordIndex = Object.assign({}, state.currentRecordIndex);
-  const recIndex = currentRecordIndex[dataUnit] || 0;
-  return gotoIndex(state, dataUnit, backward ? Math.max(limit, recIndex - 1) : Math.min(limit, recIndex + 1));
-}
-function gotoIndex(state, dataUnit, index) {
-  const currentRecordIndex = Object.assign({}, state.currentRecordIndex);
-  currentRecordIndex[dataUnit] = index;
-  return Object.assign(Object.assign({}, state), { currentRecordIndex });
-}
-function insertRecord(state, { dataUnit, insertionIndex }) {
-  const currentRecordIndex = Object.assign({}, state.currentRecordIndex);
-  const newRecordIndex = Object.assign({}, state.newRecordIndex);
-  currentRecordIndex[dataUnit] = insertionIndex;
-  newRecordIndex[dataUnit] = (state.newRecordIndex[dataUnit] || 0) + 1;
-  return Object.assign(Object.assign({}, state), { currentRecordIndex,
-    newRecordIndex });
-}
-function changeFieldValue(state, { dataUnit, recordId, fieldName, value }) {
-  const changes = Object.assign({}, state.changes);
-  const dataUnitChanges = Object.assign({}, changes[dataUnit]);
-  const recordChanges = Object.assign({}, dataUnitChanges[recordId]);
-  recordChanges[fieldName] = value;
-  dataUnitChanges[recordId] = recordChanges;
-  changes[dataUnit] = dataUnitChanges;
-  const invalidFields = Object.assign({}, state.invalidFields);
-  const dataUnitInvalidRecords = Object.assign({}, invalidFields[dataUnit]);
-  const errorMessages = Object.assign({}, dataUnitInvalidRecords[recordId]);
-  delete errorMessages[fieldName];
-  dataUnitInvalidRecords[recordId] = errorMessages;
-  invalidFields[dataUnit] = dataUnitInvalidRecords;
-  return Object.assign(Object.assign({}, state), { changes,
-    invalidFields, invalidFieldSelected: undefined });
-}
-function clearEdition(state, { dataUnit, recordsLimit }) {
-  const changes = Object.assign({}, state.changes);
-  const newRecordIndex = Object.assign({}, state.newRecordIndex);
-  const currentRecordIndex = Object.assign({}, state.currentRecordIndex);
-  delete changes[dataUnit];
-  delete newRecordIndex[dataUnit];
-  const recIndex = currentRecordIndex[dataUnit] || 0;
-  currentRecordIndex[dataUnit] = Math.min(recordsLimit, recIndex);
-  return Object.assign(Object.assign({}, state), { changes,
-    newRecordIndex,
-    currentRecordIndex });
-}
-function navigateToInvalid(state, payload) {
-  let newState = Object.assign({}, state);
-  if (newState.invalidFieldSelected === undefined) {
-    newState.invalidFieldSelected = true;
-    newState = gotoIndex(newState, payload.dataUnit, payload.recordIndex);
-    newState = changeTab(newState, payload.tabController, payload.tabIndex);
-  }
-  return newState;
-}
-function dataLoading(state, { dataUnit }) {
-  const dataLoading = Object.assign({}, state.dataLoading);
-  dataLoading[dataUnit] = true;
-  return Object.assign(Object.assign({}, state), { dataLoading });
-}
-function dataLoaded(state, { dataUnit }) {
-  const dataLoading = Object.assign({}, state.dataLoading);
-  delete dataLoading[dataUnit];
-  return Object.assign(Object.assign({}, state), { dataLoading });
-}
-function savingChanges(state, { dataUnit }) {
-  const dataLoading = Object.assign({}, state.dataLoading);
-  dataLoading[dataUnit] = true;
-  return Object.assign(Object.assign({}, state), { dataLoading });
-}
-function changesSaved(state, { dataUnit }) {
-  const dataLoading = Object.assign({}, state.dataLoading);
-  delete dataLoading[dataUnit];
-  return Object.assign(Object.assign({}, state), { dataLoading });
-}
-function removingRecord(state, { dataUnit }) {
-  const dataLoading = Object.assign({}, state.dataLoading);
-  dataLoading[dataUnit] = true;
-  return Object.assign(Object.assign({}, state), { dataLoading });
-}
-function recordRemoved(state, { dataUnit }) {
-  const dataLoading = Object.assign({}, state.dataLoading);
-  delete dataLoading[dataUnit];
-  return Object.assign(Object.assign({}, state), { dataLoading });
-}
-function invalidField(state, { dataUnit, recordId, fieldName, errorMessage }) {
-  const invalidFields = Object.assign({}, state.invalidFields);
-  const dataUnitInvalidRecords = Object.assign({}, invalidFields[dataUnit]);
-  const errorMessages = Object.assign({}, dataUnitInvalidRecords[recordId]);
-  errorMessages[fieldName] = errorMessage;
-  dataUnitInvalidRecords[recordId] = errorMessages;
-  invalidFields[dataUnit] = dataUnitInvalidRecords;
-  return Object.assign(Object.assign({}, state), { invalidFields });
-}
-function clearAllInvalidFields(state, { dataUnit }) {
-  const invalidFields = Object.assign({}, state.invalidFields);
-  delete invalidFields[dataUnit];
-  return Object.assign(Object.assign({}, state), { invalidFields });
-}
-function clearInvalidField(state, { dataUnit, recordId, fieldName }) {
-  const invalidFields = Object.assign({}, state.invalidFields);
-  const dataUnitInvalidRecords = Object.assign({}, invalidFields[dataUnit]);
-  const errorMessages = Object.assign({}, dataUnitInvalidRecords[recordId]);
-  delete errorMessages[fieldName];
-  dataUnitInvalidRecords[recordId] = errorMessages;
-  invalidFields[dataUnit] = dataUnitInvalidRecords;
-  return Object.assign(Object.assign({}, state), { invalidFields });
-}
-function showHideNavBtn(state, { buttonName, status }) {
-  const visibleButtons = Object.assign({}, state.visibleButtons);
-  visibleButtons[buttonName] = status;
-  return Object.assign(Object.assign({}, state), { visibleButtons });
 }
 
 class ApplicationUtils {
@@ -10158,775 +9284,104 @@ class ApplicationUtils {
   }
 }
 
-function removeHandler(dataUnit) {
-  ApplicationUtils.confirm("Exclusão de registro", "Tem certeza que deseja Remover?", null, true).then(ok => {
-    if (ok) {
-      dataUnit.remove();
-    }
-  });
-}
-function saveHandler(dataUnit) {
-  setTimeout(() => {
-    //Esse debouncing é necessário quando o usuário clica no botão de salvar 
-    //sem ter tirado o foco o último campo alterado.
-    dataUnit.save();
-  }, 50);
-}
-const NavigationBar = ({ dataUnit: du, buttonProps, enabled }) => {
-  if (buttonProps.previousVisible
-    || buttonProps.nextVisible
-    || buttonProps.addVisible
-    || buttonProps.removeVisible
-    || buttonProps.saveVisible
-    || buttonProps.cancelVisible
-    || buttonProps.reloadVisible) {
-    return h("div", { class: "col col--sd-12 align--right" },
-      buttonProps.previousVisible ? h("ez-button", { key: du.name + "_previous", title: "Registro anterior", mode: "icon", enabled: enabled && du.hasPrevious(), onClick: () => du.previous(), image: "/themes/default/images/icons/actions-sprite.svg#previous-circle-inverted", class: "button--secondary margin-right--medium" }) : null,
-      buttonProps.nextVisible ? h("ez-button", { key: du.name + "_next", title: "Pr\u00F3ximo registro", mode: "icon", enabled: enabled && du.hasNext(), onClick: () => du.next(), image: "/themes/default/images/icons/actions-sprite.svg#next-circle-inverted", class: "button--secondary margin-right--medium" }) : null,
-      buttonProps.removeVisible ? h("ez-button", { key: du.name + "_remove", label: "Remover", enabled: enabled && du.hasCurrentRecord(), onClick: () => removeHandler(du), image: "/themes/default/images/icons/actions-sprite.svg#minus-circle-inverted", class: "button--secondary margin-right--medium" }) : null,
-      buttonProps.addVisible ? h("ez-button", { key: du.name + "_add", label: "Adicionar", enabled: enabled, onClick: () => du.insert(), class: "button--secondary margin-right--medium" }) : null,
-      buttonProps.reloadVisible ? h("ez-button", { key: du.name + "_reload", title: "Recarregar", enabled: enabled, mode: "icon", onClick: () => du.load(), image: "/themes/default/images/icons/actions-sprite.svg#rotate", class: "button--secondary margin-right--medium" }) : null,
-      buttonProps.cancelVisible ? h("ez-button", { key: du.name + "_cancel", label: "Cancelar", enabled: enabled && du.hasChanges(), onClick: () => du.cancel(), class: "button--secondary margin-right--medium" }) : null,
-      buttonProps.saveVisible ? h("ez-button", { key: du.name + "_save", label: "Salvar", enabled: enabled && du.hasChanges(), onClick: () => saveHandler(du), class: "button--primary margin-right--medium" }) : null);
-  }
-  else {
-    return null;
-  }
-};
-
-//histórico
-const selectCurrentTab = (state, formName) => {
-  const data = state.hist.present.currentTabIndex;
-  return data[formName] || 0;
-};
-const selectIsCollapsedFieldSet = (state, fieldSetName) => {
-  const data = state.hist.present.collapsedGroups;
-  return data[fieldSetName];
-};
-const selectRecordChanges = (state, dataUnit, recordId) => {
-  const data = selectDataUnitChanges(state, dataUnit);
-  return data ? data[recordId] : undefined;
-};
-const selectDataUnitChanges = (state, dataUnit) => {
-  const data = state.hist.present.changes;
-  return data[dataUnit];
-};
-const selectCurrentRecordIndex = (state, dataUnit) => {
-  const data = state.hist.present.currentRecordIndex;
-  return data[dataUnit] || 0;
-};
-const selectNewRecordIndex = (state, dataUnit) => {
-  const data = state.hist.present.newRecordIndex;
-  return data[dataUnit] || 0;
-};
-//não histórico
-const selectLoadingData = (state, dataUnit) => {
-  const data = state.nonhist.dataLoading;
-  return data[dataUnit];
-};
-const selectErrorMessage = (state, dataUnit, recordId, fieldName) => {
-  const data = state.nonhist.invalidFields;
-  const dataUnitMessages = data[dataUnit] || {};
-  const recordMessages = dataUnitMessages[recordId] || {};
-  return recordMessages[fieldName] || "";
-};
-const selectVisibleButtons = state => state.nonhist.visibleButtons;
+const ezFormCss = "ez-form{display:flex;flex-direction:column;width:100%}";
 
-class DataUnit {
-  constructor(name, unitLabel, cardinality = "1", parentDU = null) {
-    this.name = name;
-    this.unitLabel = unitLabel;
-    this.cardinality = cardinality;
-    this._children = [];
-    this._fields = new Map();
-    this._requiredFields = [];
-    if (parentDU != null) {
-      parentDU._children.push(this);
-      this.parentDU = parentDU;
-      this.parentDUName = parentDU.name;
-    }
-  }
-  set store(store) {
-    this._store = store;
-  }
-  set fields(value) {
-    if (value) {
-      value.forEach(f => this.addFieldMetadata(f));
-    }
-  }
-  addFieldMetadata(field) {
-    this._fields.set(field.name, field);
-    if (field.required) {
-      this._requiredFields.push(field);
-    }
-  }
-  getFieldMetadata(name) {
-    if (this._fields) {
-      return this._fields.get(name);
-    }
-    return undefined;
-  }
-  get requiredFields() {
-    return this._requiredFields;
-  }
-  isLoading() {
-    return selectLoadingData(this._store.getState(), this.name);
-  }
-  hasChanges() {
-    const state = this._store.getState();
-    return selectDataUnitChanges(state, this.name) !== undefined || selectNewRecordIndex(state, this.name) > 0;
-  }
-  hasNext() {
-    return selectCurrentRecordIndex(this._store.getState(), this.name) < (this.records.length - 1);
-  }
-  hasPrevious() {
-    return selectCurrentRecordIndex(this._store.getState(), this.name) > 0;
-  }
-  hasCurrentRecord() {
-    return this.getCurrentRecord() != undefined;
-  }
-  previous() {
-    this._store.dispatch(previousRecord(this.name));
-  }
-  next() {
-    this._store.dispatch(nextRecord(this.name, this.records.length));
-  }
-  getValue(fieldName) {
-    const currentRecord = this.getCurrentRecord();
-    if (!currentRecord) {
-      return undefined;
-    }
-    const changes = this.getRecordChanges(currentRecord);
-    return changes && changes[fieldName] !== undefined ? changes[fieldName] : currentRecord[fieldName] || null;
-  }
-  getErrorMessage(fieldName) {
-    const currentRecord = this.getCurrentRecord();
-    return selectErrorMessage(this._store.getState(), this.name, currentRecord === null || currentRecord === void 0 ? void 0 : currentRecord.record__id, fieldName);
+let EzForm$1 = class extends HTMLElement$1 {
+  constructor() {
+    super();
+    this.__registerHost();
   }
-  changeValue(fieldName, newValue) {
-    if (this.records.length == 0) {
-      this.insert();
-    }
-    if (this._changeDeboucing) {
-      window.clearTimeout(this._changeDeboucing);
-    }
-    this._changeDeboucing = window.setTimeout(() => {
-      const currentRecord = this.getCurrentRecord();
-      this._store.dispatch(changeFieldValue$1(this.name, currentRecord.record__id, fieldName, newValue));
-    }, 100);
+  submit() {
+    return Promise.resolve();
   }
   cancel() {
-    this.records = this.records.filter(r => !r.record__id.startsWith("NEW_"));
-    this._store.dispatch(clearEdition$1(this.name, this.records.length - 1));
-  }
-  insert() {
-    const insertionIndex = this.records.length;
-    const newRecordIndex = selectNewRecordIndex(this._store.getState(), this.name);
-    const newRecord = { record__id: "NEW_" + (newRecordIndex + 1) };
-    this.bindToParent(newRecord);
-    this.records.push(newRecord);
-    this._store.dispatch(insertRecord$1(this.name, insertionIndex));
-  }
-  buildChange(r) {
-    const duChanges = selectDataUnitChanges(this._store.getState(), this.name);
-    let recordChanges;
-    if (duChanges) {
-      recordChanges = duChanges[r.record__id];
-    }
-    let subChanges = [];
-    this._children.forEach(duChild => {
-      subChanges = subChanges.concat(duChild.getSubChanges(r.record__id));
-    });
-    if (recordChanges || subChanges.length > 0) {
-      const change = {
-        "__data__unit": this.name,
-        "__record__id": r.record__id,
-        "__sub__changes": subChanges
-      };
-      if (recordChanges) {
-        Object.keys(recordChanges).forEach(fieldName => { });
-      }
-      return change;
-    }
-    return undefined;
-  }
-  getSubChanges(id) {
-    const result = [];
-    if (this._records) {
-      this._records.filter(r => r.parent__record__id === id).forEach(r => {
-        const c = this.buildChange(r);
-        if (c) {
-          result.push(c);
-        }
-      });
-    }
-    return result;
-  }
-  getChangesToSave() {
-    let result = [];
-    if (this._records) {
-      this._records.forEach(r => {
-        const change = this.buildChange(r);
-        if (change) {
-          result.push(change);
-        }
-      });
-    }
-    return result;
-  }
-  save() {
-    if (!this.validateRecords("SAVE")) {
-      return;
-    }
-    this._store.dispatch(savingChanges$1(this.name));
-    let saveResult;
-    if (this.saveExecutor) {
-      saveResult = this.saveExecutor(this.getChangesToSave());
-    }
-    if (saveResult instanceof Promise) {
-      saveResult
-        .then(r => this.processSaveResult(r))
-        .catch(e => {
-        this._store.dispatch(dataLoaded$1(this.name));
-        ApplicationUtils.error("Falha ao tentar salvar", e);
-      });
-    }
-    else {
-      this.processSaveResult(saveResult);
-    }
-  }
-  load() {
-    this._store.dispatch(dataLoading$1(this.name));
-    let result;
-    if (this.loadExecutor) {
-      result = this.loadExecutor({ dataUnit: this.name });
-    }
-    if (result instanceof Promise) {
-      result.then(r => this.processLoadResult(r));
-    }
-    else {
-      this.processLoadResult(result);
-    }
-  }
-  remove() {
-    const currentIndex = selectCurrentRecordIndex(this._store.getState(), this.name);
-    this._store.dispatch(removingRecord$1(this.name));
-    let removeResult;
-    if (this.removeExecutor) {
-      const record = this.getCurrentRecord();
-      removeResult = this.removeExecutor({ dataUnit: this.name, recordId: record.record__id, record });
-    }
-    else {
-      removeResult = true;
-    }
-    if (removeResult) {
-      if (removeResult instanceof Promise) {
-        removeResult.then(r => this.processRemoveResult(r, currentIndex));
-      }
-      else {
-        this.processRemoveResult(removeResult, currentIndex);
-      }
-    }
-  }
-  processSaveResult(result) {
-    if (result) {
-      if (result instanceof Array) {
-        result.forEach(item => this.processSaveResult(item));
-      }
-      else {
-        if (result.__data__unit === this.name) {
-          if (this.cardinality === "1") {
-            this.records = [this.buildRecordFromSaveResult(this.records[0], result)];
-          }
+    return Promise.resolve();
+  }
+  validate() {
+    return new Promise((accept, reject) => {
+      const metadata = selectFormMetadata(this._store.getState());
+      const requiredFields = this._staticFields
+        .filter(f => f.dataset.required)
+        .map(f => f.dataset.fieldName)
+        .concat(metadata.getRequiredFields());
+      const records = this.dataUnit.records;
+      for (let i = 0; i < records.length; i++) {
+        if (!this.validateRequired(requiredFields, records[i])) {
+          reject();
+          break;
         }
       }
-    }
-    //FIXME: Isso está errado! tem que limpar todas as edições
-    this._store.dispatch(clearEdition$1(this.name, this.records.length - 1));
-    this._store.dispatch(changesSaved$1(this.name));
-  }
-  buildRecordFromSaveResult(baseRecord, saveResult) {
-    const newRecord = baseRecord ? Object.assign({}, baseRecord) : { record__id: "" };
-    Object.keys(saveResult).forEach(attrib => {
-      if (!attrib.startsWith("__")) {
-        newRecord[attrib] = saveResult[attrib];
-      }
+      accept();
     });
-    return newRecord;
   }
-  processLoadResult(records) {
-    this.records = records;
-    this._store.dispatch(clearEdition$1(this.name, this.records.length - 1));
-    this._store.dispatch(dataLoaded$1(this.name));
-  }
-  processRemoveResult(removed, recordIndex) {
-    if (removed) {
-      this.records.splice(recordIndex, 1);
-      this._store.dispatch(clearEdition$1(this.name, this.records.length - 1));
-    }
-    this._store.dispatch(recordRemoved$1(this.name));
-  }
-  set records(records) {
-    this._records = records;
-    if (this.parentDU) {
-      this._records.forEach(r => this.bindToParent(r));
-    }
-  }
-  bindToParent(r) {
-    if (this.parentDU) {
-      const parentRecord = this.parentDU.getCurrentRecord();
-      if (parentRecord) {
-        r.parent__record__id = parentRecord.record__id;
+  validateRequired(requiredFields, record) {
+    const invalidFields = [];
+    requiredFields.forEach(field => {
+      const value = record[field];
+      const fieldElem = this._element.querySelector(`[data-field-name=${field}]`);
+      if (value === null || value === undefined || value === "") {
+        invalidFields.push(field);
+        fieldElem["errorMessage"] = "Essa informação é obrigatória";
       }
-    }
-  }
-  get records() {
-    if (!this._records) {
-      this._records = [];
-    }
-    return this._records;
-  }
-  getCurrentRecord() {
-    const currentIndex = selectCurrentRecordIndex(this._store.getState(), this.name);
-    return this.records[currentIndex];
-  }
-  getRecordChanges(currentRecord = undefined) {
-    if (currentRecord === undefined) {
-      currentRecord = this.getCurrentRecord();
-    }
-    return currentRecord ? selectRecordChanges(this._store.getState(), this.name, currentRecord.record__id) : undefined;
-  }
-  validateRecords(triggedBy = "UNKNOWN") {
-    if (!this.recordsValidator) {
-      return true;
-    }
-    const duChanges = selectDataUnitChanges(this._store.getState(), this.name);
-    const recordsToValidate = [];
-    this.records.forEach((record, i) => {
-      const changes = duChanges ? duChanges[record.record__id] : undefined;
-      if (changes) {
-        recordsToValidate.push(Object.assign(Object.assign(Object.assign({}, record), changes), { record__index: i, record__changedfields: Object.keys(changes) }));
+      else {
+        fieldElem["errorMessage"] = "";
       }
     });
-    const result = this.recordsValidator.validateRecords(this, recordsToValidate, triggedBy);
-    if (result.message) {
-      ApplicationUtils.info(result.message);
-    }
-    return result.isValid;
-  }
-}
-var DependencyType;
-(function (DependencyType) {
-  DependencyType["SEARCHING"] = "SEARCHING";
-  DependencyType["REQUIREMENT"] = "REQUIREMENT";
-  DependencyType["VISIBILITY"] = "REQUIREMENT";
-})(DependencyType || (DependencyType = {}));
-
-function scrollToView(forceScroll, elem) {
-  if (forceScroll) {
-    window.requestAnimationFrame(() => elem.scrollIntoView());
-  }
-}
-const Field = ({ dataUnit, field, forceScroll, enabled }) => {
-  const { name, form } = field;
-  const { label, userInterface, properties, required, dependencies, readOnly } = dataUnit.getFieldMetadata(name);
-  const value = dataUnit.getValue(name) || null;
-  const loadingData = dataUnit.isLoading();
-  const formattedLabel = required ? `* ${label} (obrigatório)` : label;
-  const errorMessage = dataUnit.getErrorMessage(name);
-  const key = `${dataUnit.name}-${name}`;
-  const isEnabled = enabled && !readOnly;
-  const changeFieldHandler = (newValue) => {
-    dataUnit.changeValue(name, newValue);
-  };
-  switch (userInterface) {
-    case "LONGTEXT":
-      return h("div", { class: "col col--sd-12 padding--small" }, loadingData ? h("place-holder", null) :
-        h("ez-text-area", { value: value || "", label: formattedLabel, onEzChange: evt => changeFieldHandler(evt.target["value"]), errorMessage: errorMessage, ref: elem => scrollToView(forceScroll, elem), key: key, enabled: isEnabled }));
-    case "CHECKBOX":
-    case "SWITCH":
-      return h("div", { class: "col col--sd-12 col--tb-3 padding--small align--middle padding-bottom--large" }, loadingData ? h("place-holder", null) :
-        h("ez-check", { value: value, label: label, enabled: isEnabled, mode: userInterface === "CHECKBOX" ? "regular" : "switch", onEzChange: (event) => changeFieldHandler(event.target["value"]), ref: elem => scrollToView(forceScroll, elem), key: key }));
-    case "OPTIONSELECTOR":
-      const optsObj = properties ? JSON.parse(getProp(properties, "options")) : {};
-      const normalized = Object.keys(optsObj).map(key => { return { value: key, label: optsObj[key] }; });
-      return h("div", { class: "col col--sd-12 col--tb-3 padding--small" }, loadingData ? h("place-holder", null) :
-        h("ez-combo-box", { value: value, label: formattedLabel, enabled: isEnabled, onEzChange: (event) => changeFieldHandler(event.target["value"]), errorMessage: errorMessage, ref: elem => scrollToView(forceScroll, elem), key: key, options: normalized }));
-    case "SEARCH":
-      const context = {
-        __MAIN_FORM: form,
-        __DATA_UNIT: dataUnit.name,
-        __FIELD_NAME: name
-      };
-      properties.forEach(({ name, value }) => {
-        context[name] = value;
-      });
-      let criteriaList = [];
-      dependencies === null || dependencies === void 0 ? void 0 : dependencies.forEach(dependency => {
-        var _a;
-        if (dependency.type === DependencyType.SEARCHING) {
-          if (((_a = dependency.masterFields) === null || _a === void 0 ? void 0 : _a.length) > 0) {
-            let criteria = {
-              expression: dependency.expression,
-              paramNames: [...dependency.masterFields],
-              paramResolver: name => dataUnit.getValue(name)
-            };
-            criteriaList.push(criteria);
-          }
-        }
-      });
-      if (criteriaList.length > 0) {
-        context["CRITERIA"] = criteriaList;
-      }
-      return h("div", { class: "col col--sd-12 col--tb-3 padding--small" }, loadingData ? h("place-holder", null) :
-        h("ez-search", { value: value, label: formattedLabel, enabled: isEnabled, onEzChange: (event) => changeFieldHandler(event.target["value"]), errorMessage: errorMessage, optionLoader: (argument) => {
-            if (form) {
-              return form.loadSearch(argument, context);
-            }
-          }, ref: elem => scrollToView(forceScroll, elem), key: key }));
-    case "FILE":
-      const target = getProp(properties, "URL");
-      const strHeaders = getProp(properties, "HEADERS");
-      const headers = strHeaders ? JSON.parse(strHeaders) : {};
-      const maxfiles = Number(getProp(properties, "maxfiles") || 0);
-      return (h("div", { class: "col col--sd-12 padding--small" }, loadingData ? h("place-holder", null) :
-        h("ez-upload", { value: value, label: formattedLabel, enabled: isEnabled, onEzChange: (event) => changeFieldHandler(event.detail), urlUpload: target, requestHeaders: headers, maxFiles: maxfiles })));
-    case "DATE":
-      return h("div", { class: "col col--sd-12 col--tb-3 padding--small" }, loadingData ? h("place-holder", null) :
-        h("ez-date-input", { value: !value ? null : DateUtils.clearTime(value), label: formattedLabel, enabled: isEnabled, onEzChange: (event) => changeFieldHandler(event.target["value"]), errorMessage: errorMessage, ref: elem => scrollToView(forceScroll, elem), key: key }));
-    case "DECIMALNUMBER":
-    case "INTEGERNUMBER":
-      let precision = 0;
-      let prettyPrecision = 0;
-      if (userInterface === "DECIMALNUMBER") {
-        precision = Number(getProp(properties, "precision") || 2);
-        prettyPrecision = Number(getProp(properties, "prettyprecision") || precision);
-      }
-      return h("div", { class: "col col--sd-12 col--tb-3 padding--small" }, loadingData ? h("place-holder", null) :
-        h("ez-numeric-input", { value: !value ? null : value, label: formattedLabel, enabled: isEnabled, onEzChange: (event) => changeFieldHandler(event.target["value"]), errorMessage: errorMessage, precision: precision, prettyprecision: prettyPrecision, ref: elem => scrollToView(forceScroll, elem), key: key }));
-    //IMAGE, DATETIME, ELAPSEDTIME, PASSWORD, MASKEDTEXT, HTML
-    default:
-      return h("div", { class: "col col--sd-12 col--tb-3 padding--small" }, loadingData ? h("place-holder", null) :
-        h("ez-text-input", { value: value, label: formattedLabel, enabled: isEnabled, loading: loadingData, onInput: (event) => changeFieldHandler(event.target["value"]), errorMessage: errorMessage, ref: elem => scrollToView(forceScroll, elem), key: key }));
-  }
-};
-function getProp(properties, name) {
-  var _a;
-  return properties ? (_a = properties.find(prop => prop.name === name)) === null || _a === void 0 ? void 0 : _a.value : null;
-}
-
-const FieldSet = ({ store, formName, source, dataUnit, enabled }) => {
-  const { label, fields } = source;
-  const fieldSetName = formName + label;
-  let isCollapsed = selectIsCollapsedFieldSet(store.getState(), formName + label);
-  let fieldToScroll;
-  source.fields.forEach((field) => {
-    if (fieldToScroll === undefined) {
-      const fieldError = dataUnit.getErrorMessage(field.name);
-      if (fieldError !== undefined && fieldError !== null && fieldError !== "") {
-        fieldToScroll = field.name;
-      }
-    }
-  });
-  if (fieldToScroll) {
-    isCollapsed = false;
-  }
-  return h("div", { class: "col col--sd-12 padding--small" },
-    h("div", { class: "row margin-top--large" },
-      h("div", { class: "col col--sd-12 align--middle padding-horizontal--medium" },
-        h("ez-collapsible-box", { value: isCollapsed, label: label, onEzChange: () => store.dispatch(collapseExpandGroup(fieldSetName, !isCollapsed)) }),
-        isCollapsed ? null :
-          h("div", { class: "col col--sd-12" }, fields.map(field => h(Field, { enabled: enabled, field: field, dataUnit: dataUnit, forceScroll: fieldToScroll === field.name }))))));
-};
-
-function buildFormItem(source, formName, store, dataUnit, enabled) {
-  if ("fields" in source) {
-    return h(FieldSet, { enabled: enabled, source: source, store: store, formName: formName, dataUnit: dataUnit });
-  }
-  const fieldName = source.name;
-  const errorMsg = dataUnit.getErrorMessage(fieldName);
-  const forceScroll = errorMsg === undefined || errorMsg === null || errorMsg === "" ? false : true;
-  return h(Field, { enabled: enabled, field: source, dataUnit: dataUnit, forceScroll: forceScroll });
-}
-const FormSheet = ({ store, parentName, source, parentDataUnit, dataUnitBuilder, enabled }) => {
-  const selectedTab = selectCurrentTab(store.getState(), parentName);
-  const tabs = source.length > 1 ? source.map(form => h("ez-tab", { label: form.label, tabKey: form.name })) : null;
-  const { subForms, items, name } = source[selectedTab];
-  const dataUnit = dataUnitBuilder(source[selectedTab].dataUnit, parentDataUnit);
-  source[selectedTab].dataUnit = dataUnit;
-  const hasSubForms = subForms && subForms.length > 0;
-  const changeTabHandler = (index) => {
-    store.dispatch(changeTab$1(parentName, index));
-  };
-  //todos os campos e subformulários precisam estar ligados a um DU
-  const currentDU = dataUnit || parentDataUnit;
-  let buttons = selectVisibleButtons(store.getState());
-  if (currentDU.cardinality === "1") {
-    buttons.addVisible = false;
-    buttons.removeVisible = false;
-    buttons.nextVisible = false;
-    buttons.previousVisible = false;
-  }
-  return h("div", { class: "form-sheet" },
-    tabs ? h("ez-tabselector", { selectedIndex: selectedTab, selectedTab: name, onEzChange: (evt) => changeTabHandler(evt.target.selectedindex) }, tabs) : null,
-    dataUnit ? h(NavigationBar, { enabled: enabled, dataUnit: dataUnit, buttonProps: buttons }) : null,
-    h("div", { class: "tab__container" },
-      items ? items.map(item => buildFormItem(item, name, store, currentDU, enabled)) : null,
-      hasSubForms ? h(FormSheet, { enabled: enabled, store: store, source: subForms, parentName: name, parentDataUnit: currentDU, dataUnitBuilder: dataUnitBuilder }) : null));
-};
-
-const ezFormCss = "ez-form{display:flex;flex-direction:column;width:100%}.form-sheet{display:flex;width:100%;flex-wrap:wrap;position:relative}.tab__container{display:flex;width:100%;flex-wrap:wrap;position:relative}";
-
-let EzForm$1 = class extends HTMLElement$1 {
-  constructor() {
-    super();
-    this.__registerHost();
-    this.enabled = true;
-    this.loading = false;
-    this._dataUnits = new Map();
-    this._duSources = new Map();
-    this._tabPositionByField = new Map();
-    this._duToLoad = [];
-  }
-  cleanPreparedMetadata() {
-    this._preparedMetadata = undefined;
-  }
-  async validate() {
-    const duSourcesNames = Array.from(this._duSources.keys());
-    for (let i = 0; i < this._duSources.size; i++) {
-      const duName = duSourcesNames[i];
-      let du = this._dataUnits.get(duName);
-      if (du === undefined) {
-        const source = this._duSources.get(duName);
-        du = this.buildDataUnit(source, source.parentDUName);
-      }
-      if (!du.validateRecords()) {
-        return false;
-      }
-    }
-    return true;
-  }
-  async getChanges() {
-    let allChanges = [];
-    const dataUnits = Array.from(this._dataUnits.values());
-    for (let i = 0; i < this._dataUnits.size; i++) {
-      const du = dataUnits[i];
-      //Só devemos buscar as alterações de DU raiz, pois os sub DUs serão enviados junto.
-      if (!du.parentDU) {
-        const duChanges = du.getChangesToSave();
-        if (duChanges) {
-          allChanges = allChanges.concat(duChanges);
-        }
-      }
-    }
-    return allChanges;
-  }
-  async changeFieldValue(dataUnit, fieldName, value) {
-    const du = this._dataUnits.get(dataUnit);
-    if (du) {
-      du.changeValue(fieldName, value);
+    const isValid = invalidFields.length === 0;
+    if (!isValid) {
+      ApplicationUtils.info("Há pelo menos um campo obrigatório não preenchido.");
     }
+    return isValid;
   }
-  validateRecords(dataUnit, records, triggedBy) {
-    const result = { isValid: true, message: "" };
-    if (this.ignoreSaveValidation && triggedBy === "SAVE") {
-      return result;
-    }
-    const validateField = (field) => {
-      if (field.readOnly) {
-        return false;
-      }
-      if (field.userInterface === "SWITCH" || field.userInterface === "CHECKBOX") {
-        return false;
-      }
-      return true;
-    };
-    const recordValidator = record => {
-      dataUnit.requiredFields.forEach(field => {
-        if (validateField(field)) {
-          const recordIndex = record["record__index"];
-          const fieldName = field.name;
-          const fieldValue = record[fieldName];
-          if (fieldValue === null || fieldValue === undefined || fieldValue === "") {
-            const tabPosition = this._tabPositionByField.get(dataUnit.name + field.name);
-            this._store.dispatch(invalidField$1(tabPosition.tabName, tabPosition.index, dataUnit.name, recordIndex, record.record__id, field.name, "Essa informação é obrigatória"));
-            result.isValid = false;
-            result.message = "Há pelo menos um campo obrigatório não preenchido.";
-          }
-        }
-      });
-    };
-    if (dataUnit.records.length === 0) {
-      recordValidator({});
+  getDynamicContent() {
+    var _a;
+    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;
     }
-    else {
-      let validatedRecords = {};
-      records.forEach(r => {
-        recordValidator(r);
-        validatedRecords[r.record__id] = true;
-      });
-      dataUnit.records.forEach(r => {
-        if (!validatedRecords[r.record__id]) {
-          recordValidator(r);
-        }
-      });
+    const allSheets = Array.from(formMD.getAllSheets().values());
+    const result = [];
+    if (allSheets.length > 1) {
+      result.push(h("ez-tabselector", { onEzChange: (evt) => this._store.dispatch(changeTab(evt.detail)), selectedTab: currentSheet.name }, allSheets.map(s => h("ez-tab", { tabKey: s.name, label: s.label }))));
     }
+    result.push(h(FormSheet, { store: this._store, source: currentSheet }));
     return result;
   }
-  loadMDFromExecutor(callBack) {
-    const loadMetadataFunction = this.parseExecutor(this.metadataExecutor);
-    if (loadMetadataFunction) {
-      const result = loadMetadataFunction();
-      if (result) {
-        if (result instanceof Promise) {
-          result.then(md => {
-            callBack(md);
-          });
-        }
-        else {
-          callBack(result);
-        }
-      }
-    }
-  }
-  loadMDFromElement(callBack) {
-    const metadata = [];
-    Array.from(this._host.children).forEach(elem => {
-      if (elem.tagName === "FORM-METADATA") {
-        const formMetadata = elem;
-        metadata.push(formMetadata.metadata);
-      }
-    });
-    callBack(metadata.length > 0 ? metadata : null);
-  }
-  updateMetadata(metadata) {
-    if (metadata) {
-      const processFields = (duName, form, tabController, tabIndex) => {
-        var _a;
-        form.items.forEach(item => {
-          if ("fields" in item) {
-            const fSet = item;
-            fSet.fields.forEach(f => {
-              f.form = this;
-              this._tabPositionByField.set(duName + f.name, { tabName: tabController, index: tabIndex });
-            });
-          }
-          else {
-            const f = item;
-            f.form = this;
-            this._tabPositionByField.set(duName + f.name, { tabName: tabController, index: tabIndex });
-          }
-        });
-        (_a = form.subForms) === null || _a === void 0 ? void 0 : _a.forEach((subForm, index) => {
-          const subDu = subForm.dataUnit;
-          if (subDu) {
-            this._duSources.set(subDu.name, subDu);
-            subDu.parentDUName = duName;
-          }
-          processFields(subDu ? subDu.name : duName, subForm, form.name, index);
-        });
-      };
-      this._preparedMetadata = metadata.map((form, index) => {
-        const du = form.dataUnit;
-        if (form.autoLoad) {
-          this._duToLoad.push(du);
-        }
-        this.decorateDU(du);
-        const duName = du.name;
-        this._duSources.set(duName, du);
-        processFields(duName, form, "__MAIN__FORM__", index);
-        return form;
-      });
-      this._store.dispatch(formLoad());
+  processMetadata() {
+    if (!this.isStatic()) {
+      const metadata = this.config && this.config.length > 0 ? buildFromConfig(this.config, this.dataUnit) : buildFromDataUnit(this.dataUnit);
+      this._store.dispatch(loadMetadata(metadata));
     }
   }
-  parseExecutor(executor) {
-    if (executor) {
-      return executor instanceof Function ? executor : eval(executor);
-    }
-    return null;
+  isStatic() {
+    var _a;
+    return ((_a = this._staticFields) === null || _a === void 0 ? void 0 : _a.length) > 0;
   }
-  componentWillRender() {
-    if (this._store === undefined) {
-      const rootReducer = combineReducers({
-        "hist": undoable(formReducer),
-        "nonhist": formNonHistoricReducer
-      });
-      this._store = createStore(rootReducer, applyMiddleware(thunk));
-      this._store.subscribe(() => { forceUpdate(this); });
-      if (this.slaveMode) {
-        this._store.dispatch(showHideNavigationButtons("saveVisible", false));
-        this._store.dispatch(showHideNavigationButtons("cancelVisible", false));
-        this._store.dispatch(showHideNavigationButtons("reloadVisible", false));
-      }
+  componentWillLoad() {
+    if (this.dataUnit === undefined) {
+      this.dataUnit = new DataUnit("ez-form");
     }
-    if (this._preparedMetadata === undefined) {
-      if (this.metadata) {
-        this.updateMetadata(this.metadata);
+    this.dataUnit.subscribe(action => {
+      if (action.type === Action.METADATA_LOADED) {
+        this.processMetadata();
       }
-      else {
-        this.loadMDFromElement((md) => this.updateMetadata(md));
-        if (!this._preparedMetadata) {
-          this.loadMDFromExecutor((md) => this.updateMetadata(md));
-        }
-      }
-    }
+    });
+    this._dataBinder = new DataBinder(this.dataUnit);
+    this._store = createStore(formReducer);
+    this._store.subscribe(() => forceUpdate(this));
+    this._staticFields = Array.from(this._element.querySelectorAll("[data-field-name]"));
+    this.processMetadata();
   }
   componentDidRender() {
-    this._duToLoad.forEach(du => du.load());
-    this._duToLoad = [];
-  }
-  loadSearch(argument, context) {
-    const fieldSearchExecutor = this.parseExecutor(this.fieldSearchExecutor);
-    if (fieldSearchExecutor) {
-      return fieldSearchExecutor(argument, context);
-    }
-    else {
-      return [{ value: 0, label: "Sem resultados" }];
-    }
-  }
-  buildDataUnit(dataUnit, parentDataUnit) {
-    if (dataUnit) {
-      const { name, unitLabel, records, cardinality, fields } = dataUnit;
-      if (!(dataUnit instanceof DataUnit)) {
-        let parent;
-        if (parentDataUnit instanceof DataUnit) {
-          parent = parentDataUnit;
-        }
-        else {
-          parent = this._dataUnits.get(parentDataUnit);
-        }
-        dataUnit = new DataUnit(name, unitLabel, cardinality, parent);
-        dataUnit.fields = fields;
-        this._dataUnits.set(dataUnit.name, dataUnit);
-        if (records) {
-          dataUnit.records = records;
-        }
-      }
-      this.decorateDU(dataUnit);
-    }
-    return dataUnit;
-  }
-  decorateDU(dataUnit) {
-    dataUnit.store = this._store;
-    dataUnit.loadExecutor = this.parseExecutor(this.loadExecutor);
-    dataUnit.saveExecutor = this.parseExecutor(this.saveExecutor);
-    dataUnit.removeExecutor = this.parseExecutor(this.removeExecutor);
-    dataUnit.recordsValidator = this;
+    this._dataBinder.bind(Array.from(this._element.querySelectorAll("[data-field-name]")));
   }
   render() {
-    if (this.loading) {
-      return h("place-holder", null);
-    }
-    else {
-      return this._preparedMetadata ? h(FormSheet, { enabled: this.enabled, store: this._store, source: this._preparedMetadata, parentName: "__MAIN__FORM__", dataUnitBuilder: (du, parentDataUnit) => this.buildDataUnit(du, parentDataUnit) }) : null;
-    }
+    return (h(Host, null, this.isStatic() ? null : this.getDynamicContent()));
   }
-  static get assetsDirs() { return ["assets"]; }
-  get _host() { return this; }
-  static get watchers() { return {
-    "metadata": ["cleanPreparedMetadata"]
-  }; }
+  get _element() { return this; }
   static get style() { return ezFormCss; }
 };
 
@@ -123181,128 +121636,6 @@ let EzUpload$1 = class extends HTMLElement$1 {
   static get style() { return ezUploadCss; }
 };
 
-let FormMetadata$1 = class extends HTMLElement$1 {
-  constructor() {
-    super();
-    this.__registerHost();
-    this.__attachShadow();
-  }
-  buildField(element) {
-    let label = element.getAttribute("label");
-    let name = element.getAttribute("name") || label;
-    let userInterface = element.getAttribute("ui") || "SHORTTEXT";
-    let properties = [];
-    if (userInterface === "OPTIONSELECTOR") {
-      if (!label) {
-        label = "Selecione uma das opções:";
-      }
-      const objOpts = {};
-      Array.from(element.getElementsByTagName("OPTION")).forEach((optElem, index) => {
-        const optValue = optElem.getAttribute("value") || index;
-        const optLabel = optElem.textContent;
-        objOpts[optValue] = optLabel;
-      });
-      properties.push({ name: "options", value: JSON.stringify(objOpts) });
-    }
-    else if (userInterface === "FILE") {
-      const urlElement = element.querySelector("URL");
-      const headersElement = element.querySelectorAll("HEADERS>HEADER");
-      if (urlElement) {
-        properties.push({ name: "URL", value: urlElement.textContent });
-      }
-      if (headersElement && headersElement.length > 0) {
-        const headers = {};
-        headersElement.forEach(header => {
-          headers[header.getAttribute("name")] = header.textContent;
-        });
-        properties.push({ name: "HEADERS", value: JSON.stringify(headers) });
-      }
-      this.addPropertyIfExists(properties, element, "maxfiles");
-    }
-    else {
-      if (!label) {
-        label = element.textContent;
-      }
-      this.addPropertyIfExists(properties, element, "precision");
-      this.addPropertyIfExists(properties, element, "prettyprecision");
-    }
-    const defaultValue = element.getAttribute("defaultValue");
-    const required = element.getAttribute("required") === "true";
-    const readOnly = element.getAttribute("readonly") === "true";
-    return { name, userInterface, label, defaultValue, required, readOnly, properties };
-  }
-  addPropertyIfExists(properties, element, name) {
-    const value = element.getAttribute(name);
-    if (value) {
-      properties.push({ name, value });
-    }
-  }
-  buildFieldSet(dataUnit, element) {
-    const label = element.getAttribute("label");
-    const fields = Array.from(element.getElementsByTagName("FIELD")).map(f => {
-      const field = this.buildField(f);
-      dataUnit.addFieldMetadata(field);
-      return { name: field.name };
-    });
-    return { label, fields };
-  }
-  fromElements(elements, label, name, dataUnit, autoLoad) {
-    const form = {
-      name: name || label,
-      dataUnit,
-      label,
-      autoLoad
-    };
-    Array.from(elements).forEach(child => {
-      const tagName = child.tagName.toUpperCase();
-      switch (tagName) {
-        case "FIELD":
-          if (!form.items) {
-            form.items = [];
-          }
-          const f = this.buildField(child);
-          dataUnit.addFieldMetadata(f);
-          form.items.push({ name: f.name });
-          break;
-        case "FIELD-SET":
-          if (!form.items) {
-            form.items = [];
-          }
-          form.items.push(this.buildFieldSet(dataUnit, child));
-          break;
-        case "SUB-FORM":
-          if (!form.subForms) {
-            form.subForms = [];
-          }
-          const label = child.getAttribute("label") || "Subform " + (form.subForms.length + 1);
-          const name = child.getAttribute("name") || label;
-          const subDuName = child.getAttribute("dataunit");
-          let subDu;
-          if (subDuName) {
-            subDu = new DataUnit(subDuName, "noname", child.hasAttribute("many") ? "N" : "1");
-          }
-          else {
-            subDu = dataUnit;
-          }
-          form.subForms.push(this.fromElements(child.children, label, name, subDu, child.getAttribute("autoload") === "true"));
-          break;
-      }
-    });
-    return form;
-  }
-  connectedCallback() {
-    if (!this.dataunit) {
-      this.dataunit = "dataunit_" + (this.name || this.label || new Date().getTime());
-    }
-    const du = new DataUnit(this.dataunit, "noname", this.many ? "N" : "1");
-    this.metadata = this.fromElements(this._host.children, this.label, this.name, du, this.autoload);
-  }
-  render() {
-    return h(Host, null);
-  }
-  get _host() { return this; }
-};
-
 const gridConfigCss = ":host{--ez-grid-config__footer--padding-top:var(--space--medium, 12px);--ez-grid-config__main--padding-right:var(--space--medium, 12px);--ez-grid-config__tabselector-container--padding:var(--space--medium, 12px);--ez-grid-config__button-close--padding-left:var(--space--medium, 12px);--ez-grid-config__subtitle--font-family:var(--font-pattern, \"Sora\");--ez-grid-config__title--font-family:var(--font-pattern, \"Sora\");--ez-grid-config__title--font-weight:var(--text-weight--large, 14px);--ez-grid-config__subtitle--font-size:var(--text--medium, 14px);--ez-grid-config__scrollbar--width:var(--space--medium, 12px);--ez-grid-config__main__scrollbar--background-color:var(--text--primary, #626e82);--ez-grid-config__main__scrollbar--border-radius:var(--border--radius-medium, 12px);display:grid;grid-template-rows:auto 1fr auto;max-height:100%;width:100%}.padding-right--medium{padding-right:var(--space--medium)}ez-list{height:100%}.grid-config__footer{padding-top:var(--ez-grid-config__footer--padding-top);display:flex;justify-content:flex-end;width:100%}.hidden{display:none}.grid-config__main{padding-right:var(--ez-grid-config__main--padding-right);overflow-y:auto}.tabselector-container{padding:var(--ez-grid-config__tabselector-container--padding) 0}.button-close{padding-left:var(--ez-grid-config__button-close--padding-left)}.title-container{display:flex;justify-content:center;align-items:center}.subtitle{font-family:var(--ez-grid-config__subtitle--font-family);font-size:var(--ez-grid-config__subtitle--font-size)}.title{display:flex;font-family:var(--ez-grid-config__title--font-family);margin:0;font-weight:var(--ez-grid-config__title--font-weight);line-height:1.3}.grid-config__main::-webkit-scrollbar-track{background-color:#f0f2f5}.grid-config__main::-webkit-scrollbar-thumb{background-color:var(--ez-grid-config__main__scrollbar--background-color);border-radius:var(--ez-grid-config__main__scrollbar--border-radius)}.grid-config__main::-webkit-scrollbar{background-color:#f0f2f5;width:var(--ez-grid-config__scrollbar--width);max-width:var(--ez-grid-config__scrollbar--width);min-width:var(--ez-grid-config__scrollbar--width)}";
 
 let GridConfig$1 = class extends HTMLElement$1 {
@@ -123553,20 +121886,6 @@ let GridConfig$1 = class extends HTMLElement$1 {
   static get style() { return gridConfigCss; }
 };
 
-const placeHolderCss = ":host{display:flex;width:100%;height:42px;border-radius:12px;background:var(--background--medium);background-image:linear-gradient(to right, var(--background--medium) 0%, var(--background--strong) 20%, var(--background--medium) 40%, var(--background--medium) 100%);background-repeat:no-repeat;background-size:800px 1000px;animation-duration:1s;animation-fill-mode:forwards;animation-iteration-count:infinite;animation-name:placeholderShimmer;animation-timing-function:linear}@keyframes placeholderShimmer{0%{background-position:-800px 0}100%{background-position:800px 0}}";
-
-let PlaceHolder$1 = class extends HTMLElement$1 {
-  constructor() {
-    super();
-    this.__registerHost();
-    this.__attachShadow();
-  }
-  render() {
-    return h(Host, null);
-  }
-  static get style() { return placeHolderCss; }
-};
-
 const selectBoxCss = "select{border:1px solid #DCE0E8;font-family:'Sora';border-radius:3px;outline:none;cursor:pointer}";
 
 let SelectBox$1 = class extends HTMLElement$1 {
@@ -123602,34 +121921,77 @@ let TestDu$1 = class extends HTMLElement$1 {
   constructor() {
     super();
     this.__registerHost();
-    this._dataUnit = new DataUnit$1("duteste");
   }
-  componentDidLoad() {
-    this._dataUnit.dataLoader = (_dataUnit, _sort, _filters) => {
-      return Promise.resolve([
-        { __record__id__: "registro1", CODPARC: 10, NOMEPARC: "Parceiro 10" },
-        { __record__id__: "registro2", CODPARC: 20, NOMEPARC: "Parceiro 20" }
-      ]);
-    };
-    this._dataUnit.metadata = {
-      name: "Parceiro",
+  componentWillLoad() {
+    this.dataUnit = new DataUnit("testes_com_formulario");
+    this.dataUnit.metadata = {
+      name: "dd://br.com.sankhya.fin.cad.movimentacaoFinanceira/Financeiro",
       label: "Parceiro",
       fields: [
         {
           name: "CODPARC",
-          label: "Cód. Parceiro",
-          dataType: DataType.NUMBER
+          label: "Parceiro",
+          dataType: DataType.NUMBER,
+          userInterface: UserInterface.SEARCH,
+          required: true,
+          properties: {}
+        },
+        {
+          name: "RECDESP",
+          label: "Receita/Despesa",
+          dataType: DataType.TEXT,
+          userInterface: UserInterface.OPTIONSELECTOR,
+          required: true,
+          properties: { options: `{"-1": "Despesa", "1": "Receita"}` }
         },
         {
-          name: "NOMEPARC",
-          label: "Nome Parceiro",
-          dataType: DataType.TEXT
+          name: "P",
+          label: "pera",
+          dataType: DataType.TEXT,
+          userInterface: UserInterface.OPTIONSELECTOR,
+          properties: { options: `{"M": "Madura", "V": "Verde", "P": "Passada"}` }
+        },
+        {
+          name: "ME",
+          label: "ME",
+          dataType: DataType.NUMBER,
+          userInterface: UserInterface.DECIMALNUMBER,
+          properties: { precision: 4, prettyPrecision: 1 }
         }
       ]
     };
+    this.formConfig = [
+      { name: "CODPARC", label: "Parceiro" },
+      { name: "NOMEPARC", label: "Mamão" },
+      { name: "P", label: "Pêra", group: "Grupo 1" },
+      { name: "ME", label: "Melancia", tab: "aba 1", group: "Grupo 2" },
+      { name: "L", label: "Laranja", tab: "aba 1", group: "Grupo 1" },
+      { name: "LI", label: "Limão", tab: "aba 1", group: "Grupo 2" }
+    ];
+    this.dataUnit.records = [
+      {
+        __record__id__: "1321321321321321",
+        CODPARC: 10,
+        NOMEPARC: "Parceiro 10",
+        P: "M",
+        L: "Bagaço",
+        LI: "Azedo"
+      }
+    ];
   }
   render() {
-    return (h("section", { class: "padding--large" }, h("div", { class: "row margin-bottom--large" }, h("h1", { class: "title title--primary" }, "Formul\u00E1rios")), h("div", { class: "col col--sd-12", style: { height: "600px" } }, h("ez-grid", { dataUnit: this._dataUnit, "server-url": "https://www.ag-grid.com/example-assets/row-data.json", "multiple-selection": true, "page-size": "100" }))));
+    //return this.conteudoEstatico();
+    //return this.somenteDataUnit();
+    return this.configurado();
+  }
+  conteudoEstatico() {
+    return (h("div", null, h("button", { onClick: () => this.form.validate() }, "Validate"), h("ez-form", { ref: ref => this.form = ref }, h("div", null, h("ez-text-input", { label: "Nome (Label est\u00E1tico)", "data-field-name": "NOMEPARC", "data-required": "true" }), h("ez-text-input", { label: "C\u00F3d parc (Label est\u00E1tico)", "data-field-name": "CODPARC", "data-required": "true" })))));
+  }
+  somenteDataUnit() {
+    return (h("ez-form", { dataUnit: this.dataUnit }));
+  }
+  configurado() {
+    return (h("ez-form", { dataUnit: this.dataUnit, config: this.formConfig, ref: ref => this.form = ref }));
   }
   static get style() { return testDuCss; }
 };
@@ -123644,7 +122006,7 @@ const EzComboBox = /*@__PURE__*/proxyCustomElement(EzComboBox$1, [1,"ez-combo-bo
 const EzDateInput = /*@__PURE__*/proxyCustomElement(EzDateInput$1, [1,"ez-date-input",{"label":[513],"value":[1040],"enabled":[516],"errorMessage":[1537,"error-message"]}]);
 const EzDateTimeInput = /*@__PURE__*/proxyCustomElement(EzDateTimeInput$1, [1,"ez-date-time-input",{"label":[513],"value":[1040],"enabled":[516],"errorMessage":[1537,"error-message"],"showSeconds":[516,"show-seconds"]}]);
 const EzDialog = /*@__PURE__*/proxyCustomElement(EzDialog$1, [1,"ez-dialog",{"confirm":[1028],"critical":[1028],"message":[1025],"opened":[1540],"personalizedIconPath":[1025,"personalized-icon-path"],"ezTitle":[1025,"ez-title"]}]);
-const EzForm = /*@__PURE__*/proxyCustomElement(EzForm$1, [0,"ez-form",{"metadataExecutor":[1,"metadata-executor"],"loadExecutor":[1,"load-executor"],"saveExecutor":[1,"save-executor"],"removeExecutor":[1,"remove-executor"],"fieldSearchExecutor":[1,"field-search-executor"],"ignoreSaveValidation":[4,"ignore-save-validation"],"metadata":[16],"slaveMode":[4,"slave-mode"],"enabled":[4],"loading":[1540]}]);
+const EzForm = /*@__PURE__*/proxyCustomElement(EzForm$1, [0,"ez-form",{"dataUnit":[1040],"config":[16]}]);
 const EzGrid = /*@__PURE__*/proxyCustomElement(EzGrid$1, [0,"ez-grid",{"multipleSelection":[4,"multiple-selection"],"pageSize":[2,"page-size"],"serverUrl":[1,"server-url"],"dataUnit":[16],"_navigationHasPrevious":[32],"_navigationHasNext":[32],"_navigationFirstRow":[32],"_navigationLastRow":[32],"_navigationTotalRows":[32],"_popUpVisible":[32]}]);
 const EzIcon = /*@__PURE__*/proxyCustomElement(EzIcon$1, [1,"ez-icon",{"size":[513],"href":[513]}]);
 const EzLabelChip = /*@__PURE__*/proxyCustomElement(EzLabelChip$1, [1,"ez-label-chip",{"label":[513],"enabled":[516],"removable":[516],"value":[1540]}]);
@@ -123660,9 +122022,7 @@ const EzTextInput = /*@__PURE__*/proxyCustomElement(EzTextInput$1, [1,"ez-text-i
 const EzTimeInput = /*@__PURE__*/proxyCustomElement(EzTimeInput$1, [1,"ez-time-input",{"label":[513],"viewValue":[1537,"view-value"],"value":[1026],"enabled":[516],"errorMessage":[1537,"error-message"],"showSeconds":[516,"show-seconds"]}]);
 const EzToast = /*@__PURE__*/proxyCustomElement(EzToast$1, [1,"ez-toast",{"message":[1025],"fadeTime":[1026,"fade-time"],"useIcon":[1028,"use-icon"]}]);
 const EzUpload = /*@__PURE__*/proxyCustomElement(EzUpload$1, [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]}]);
-const FormMetadata = /*@__PURE__*/proxyCustomElement(FormMetadata$1, [1,"form-metadata",{"name":[1],"label":[1],"dataunit":[1025],"many":[4],"autoload":[4],"metadata":[1040]}]);
 const GridConfig = /*@__PURE__*/proxyCustomElement(GridConfig$1, [1,"grid-config",{"selectedTab":[1025,"selected-tab"],"columns":[1040]}]);
-const PlaceHolder = /*@__PURE__*/proxyCustomElement(PlaceHolder$1, [1,"place-holder"]);
 const SelectBox = /*@__PURE__*/proxyCustomElement(SelectBox$1, [1,"select-box",{"selectedOption":[1,"selected-option"]}]);
 const TestDu = /*@__PURE__*/proxyCustomElement(TestDu$1, [0,"test-du"]);
 const defineCustomElements = (opts) => {
@@ -123694,9 +122054,7 @@ const defineCustomElements = (opts) => {
   EzTimeInput,
   EzToast,
   EzUpload,
-  FormMetadata,
   GridConfig,
-  PlaceHolder,
   SelectBox,
   TestDu
     ].forEach(cmp => {
@@ -123707,4 +122065,4 @@ const defineCustomElements = (opts) => {
   }
 };
 
-export { EzActionChip, EzApplication, EzButton, EzCalendar, EzCheck, EzCollapsibleBox, EzComboBox, EzDateInput, EzDateTimeInput, EzDialog, EzForm, EzGrid, EzIcon, EzLabelChip, EzList, EzModal, EzNumberInput, EzPopover, EzPopup, EzSearch, EzTabselector, EzTextArea, EzTextInput, EzTimeInput, EzToast, EzUpload, FormMetadata, GridConfig, PlaceHolder, SelectBox, TestDu, defineCustomElements };
+export { EzActionChip, EzApplication, EzButton, EzCalendar, EzCheck, EzCollapsibleBox, EzComboBox, EzDateInput, EzDateTimeInput, EzDialog, EzForm, EzGrid, EzIcon, EzLabelChip, EzList, EzModal, EzNumberInput, EzPopover, EzPopup, EzSearch, EzTabselector, EzTextArea, EzTextInput, EzTimeInput, EzToast, EzUpload, GridConfig, SelectBox, TestDu, defineCustomElements };