@sankhyalabs/ezui 0.0.0-bugfix-dev-KB-08202.0

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

@@ -0,0 +1,929 @@
+import { r as registerInstance, c as createEvent, h, f as forceUpdate, H as Host, g as getElement } from './index-296b8458.js';
+import { DateUtils, Action, WaitingChangeException, ApplicationContext, DataUnitAction, StringUtils, DataUnit, ElementIDUtils } from '@sankhyalabs/core';
+import { b as buildFieldMetadata, R as RecordValidationProcessor } from './RecordValidationProcessor-abc814af.js';
+import './ApplicationUtils-d9a34a16.js';
+import './DialogType-54a62731.js';
+
+const DETAIL_PATTERN = /child\[([^\]]+)\]/;
+const REGEX_DEFAULT_VAR_KEY = /\$\{.+\}/;
+class FormMetadata {
+  constructor() {
+    this._sheets = new Map();
+    this._requiredFields = [];
+    this._cleanOnCopyFields = [];
+    this._defaultValues = {};
+  }
+  static getDetailName(name) {
+    const result = DETAIL_PATTERN.exec(name);
+    return result ? result[1] : undefined;
+  }
+  getSheet(name) {
+    return this._sheets.get(name);
+  }
+  getAllSheets() {
+    return this._sheets;
+  }
+  addSheet(sheet) {
+    this._sheets.set(sheet.name, sheet);
+  }
+  addRequiredFields(fields) {
+    this._requiredFields = this._requiredFields.concat(fields);
+  }
+  getRequiredFields() {
+    return this._requiredFields;
+  }
+  addCleanOnCopyFields(fields) {
+    this._cleanOnCopyFields = this._cleanOnCopyFields.concat(fields);
+  }
+  getCleanOnCopyFields() {
+    return this._cleanOnCopyFields;
+  }
+  addDefaultValues(defaultValues) {
+    return this._defaultValues = Object.assign(Object.assign({}, this._defaultValues), defaultValues);
+  }
+  getDefaultValues() {
+    const result = {};
+    Object.entries(this._defaultValues).forEach(([key, value]) => {
+      if (typeof value === "string") {
+        const result = REGEX_DEFAULT_VAR_KEY.exec(value);
+        if (result) {
+          value = this.getDefaultVar(result[0]);
+        }
+      }
+      result[key] = value;
+    });
+    return result;
+  }
+  getDefaultVar(name) {
+    if (name === "${data}") {
+      return DateUtils.getToday();
+    }
+    if (name === "${datahora}") {
+      return DateUtils.getToday(true);
+    }
+    return this._defaultVars ? this._defaultVars.get(name) : undefined;
+  }
+  setDefaultVars(vars) {
+    this._defaultVars = vars;
+  }
+}
+const buildFormConfigFromDataUnit = (dataUnit) => {
+  const unitMD = dataUnit.metadata;
+  let fields;
+  if (unitMD) {
+    fields = unitMD.fields
+      .filter(descriptor => descriptor.visible !== false)
+      .map(descriptor => { return { name: descriptor.name, defaultValue: descriptor.defaultValue }; });
+  }
+  const config = { emptyConfig: false, fields };
+  return config;
+};
+const buildFormMetadata = (config, dataUnit, includeDetails = false) => {
+  var _a, _b;
+  if (config == undefined || (config === null || config === void 0 ? void 0 : config.emptyConfig) === true) {
+    config = buildFormConfigFromDataUnit(dataUnit);
+  }
+  const sheets = new Map();
+  const hiddenTabs = new Map();
+  const requiredFields = [];
+  const cleanOnCopyFields = [];
+  const defaultValues = {};
+  (_a = config === null || config === void 0 ? void 0 : config.tabs) === null || _a === void 0 ? void 0 : _a.forEach((tab) => {
+    if (!hiddenTabs.has(tab.label) && tab.visible === false) {
+      hiddenTabs.set(tab.label, tab);
+    }
+  });
+  (_b = config === null || config === void 0 ? void 0 : config.fields) === null || _b === void 0 ? void 0 : _b.forEach((field) => {
+    var _a, _b, _c;
+    if (field.visible !== false) {
+      const tabConfig = getTabConfig(field.tab || "__main", sheets);
+      if (hiddenTabs.has(tabConfig.label)) {
+        return;
+      }
+      const descriptor = dataUnit.getField(field.name);
+      if (descriptor && tabConfig.visible) {
+        if (!sheets.has(tabConfig)) {
+          sheets.set(tabConfig, []);
+        }
+        const formField = buildFieldMetadata(descriptor, field);
+        sheets.get(tabConfig).push(formField);
+        if (formField.required) {
+          requiredFields.push(field.name);
+        }
+        const cleanOnCopy = field.cleanOnCopy == undefined ? (_a = descriptor.properties) === null || _a === void 0 ? void 0 : _a.cleanOnCopy : field.cleanOnCopy;
+        if (cleanOnCopy || ((_b = descriptor.properties) === null || _b === void 0 ? void 0 : _b.cleanOnCopy)) {
+          cleanOnCopyFields.push(field.name);
+        }
+        let defaultValue = field.defaultValue == undefined ? (_c = descriptor.properties) === null || _c === void 0 ? void 0 : _c.defaultValue : field.defaultValue;
+        if (defaultValue && defaultValue.value != undefined) {
+          const { type, value } = defaultValue;
+          if (type) {
+            if (type === "V") {
+              defaultValue = value;
+            }
+            else {
+              try {
+                const parsed = JSON.parse(value);
+                if (parsed && "value" in parsed) {
+                  defaultValue = parsed;
+                }
+                else {
+                  defaultValue = value;
+                }
+              }
+              catch (_d) { }
+            }
+          }
+          defaultValues[field.name] = defaultValue;
+        }
+      }
+    }
+  });
+  const metadata = new FormMetadata();
+  metadata.setDefaultVars(config.defaultVars);
+  if (includeDetails) {
+    const unitMD = dataUnit.metadata;
+    if (unitMD != undefined && unitMD.children != undefined) {
+      unitMD.children.forEach(child => {
+        const { label, name, fields } = buildDetailSheet(child);
+        sheets.set({ name, label }, fields);
+      });
+    }
+  }
+  Array.from(sheets.entries())
+    .sort(sortTabs)
+    .forEach(([key, fields]) => {
+    metadata.addSheet({
+      label: (key.label === "__main") ? "Principal" : key.label,
+      name: key.name || key.label,
+      fields
+    });
+  });
+  metadata.addRequiredFields(requiredFields);
+  metadata.addCleanOnCopyFields(cleanOnCopyFields);
+  metadata.addDefaultValues(defaultValues);
+  return metadata;
+};
+const getTabConfig = (tab, sheets) => {
+  const tabConfig = (typeof tab === "string" ? Array.from(sheets.keys()).find(t => t.label === tab) : tab);
+  return tabConfig || { label: tab, visible: true };
+};
+const sortTabs = (a, b) => {
+  return a[0].label == '__main' ? -1 : (a[0].order || 10000) - (b[0].order || 10000);
+};
+const buildDetailSheet = (child) => {
+  return {
+    name: `child[${child.name}]`,
+    label: child.label,
+    fields: []
+  };
+};
+
+class DataBinder {
+  constructor(dataUnit) {
+    this.onDataUnitEvent = (action) => {
+      var _a, _b;
+      switch (action.type) {
+        case Action.DATA_LOADED:
+        case Action.DATA_SAVED:
+        case Action.RECORDS_REMOVED:
+        case Action.RECORDS_ADDED:
+        case Action.RECORDS_COPIED:
+        case Action.EDITION_CANCELED:
+        case Action.SELECTION_CHANGED:
+        case Action.NEXT_SELECTED:
+        case Action.PREVIOUS_SELECTED:
+          this.clearInvalid();
+        case Action.DATA_CHANGED:
+        case Action.CHANGE_UNDONE:
+        case Action.CHANGE_REDONE:
+        case Action.RECORD_LOADED:
+          (_a = this._fields) === null || _a === void 0 ? void 0 : _a.forEach(field => {
+            this.updateValue(field.fieldName, field.field);
+          });
+          break;
+        case Action.FIELD_INVALIDATED:
+          (_b = this._fields) === null || _b === void 0 ? void 0 : _b.forEach(field => {
+            this.updateErrorMessage(field.fieldName, field.field);
+          });
+          break;
+      }
+    };
+    this._fields = new Map();
+    this._dataUnit = dataUnit;
+    this.applyDefaultValues();
+    this._dataUnit.subscribe(this.onDataUnitEvent);
+    this._dataUnit.addInterceptor(this);
+  }
+  applyDefaultValues() {
+    const recordIds = (this._dataUnit.getAddedRecords() || []).map(r => r.__record__id__);
+    if (recordIds.length > 0) {
+      const defaultValues = this.getDefaultValues();
+      if (defaultValues) {
+        Object.keys(defaultValues).forEach(field => {
+          this._dataUnit.setFieldValue(field, defaultValues[field], recordIds);
+        });
+      }
+    }
+  }
+  bind(fields, currentContextName, formMetadata, recordsValidator) {
+    fields.forEach(fieldElement => {
+      const { fieldName, contextName } = fieldElement.dataset;
+      if (contextName == undefined || contextName === currentContextName) {
+        this.updateBind(fieldName, fieldElement);
+      }
+    });
+    this._formMetadata = formMetadata;
+    this._recordValidatorProcessor = new RecordValidationProcessor(this._dataUnit, {
+      getRequiredFields: () => this._formMetadata.getRequiredFields(),
+      markAsInvalid: field => this.markInvalid(field),
+      getMessageForField: field => this.getErrorMessage(field)
+    }, recordsValidator);
+  }
+  onDisconnectedCallback() {
+    this._dataUnit.unsubscribe(this.onDataUnitEvent);
+    this._dataUnit.removeInterceptor(this);
+  }
+  getCurrentRecordId() {
+    const record = this._dataUnit.getSelectedRecord();
+    return record === null || record === void 0 ? void 0 : record.__record__id__;
+  }
+  markInvalid(field) {
+    if (this._fields.has(field.name)) {
+      const fieldElement = this._fields.get(field.name).field;
+      this.updateErrorMessage(field.name, fieldElement, field.message);
+    }
+  }
+  clearInvalid(recordId) {
+    this._dataUnit.clearInvalid(recordId);
+    this._fields.forEach(fieldBinder => {
+      const fieldElement = fieldBinder.field;
+      fieldElement["errorMessage"] = "";
+    });
+  }
+  updateValue(fieldName, field) {
+    const bind = this._fields.get(fieldName);
+    try {
+      if (bind) {
+        bind.listen = false;
+      }
+      field["value"] = this._dataUnit.getFieldValue(fieldName);
+      this.updateErrorMessage(fieldName, field);
+    }
+    finally {
+      if (bind) {
+        bind.listen = true;
+      }
+    }
+  }
+  validate() {
+    return this._recordValidatorProcessor.validate();
+  }
+  updateErrorMessage(fieldName, field, message) {
+    if (message == undefined) {
+      message = this._dataUnit.getInvalidMessage(this.getCurrentRecordId(), fieldName);
+    }
+    if (!field["errorMessage"]) {
+      field["errorMessage"] = message;
+    }
+  }
+  getErrorMessage(fieldName) {
+    if (this._fields.has(fieldName)) {
+      const fieldElement = this._fields.get(fieldName).field;
+      return fieldElement["errorMessage"];
+    }
+    return undefined;
+  }
+  updateBind(fieldName, field) {
+    const oldBind = this._fields.get(fieldName);
+    if (oldBind) {
+      oldBind.destroy();
+    }
+    field["value"] = this._dataUnit.getFieldValue(fieldName);
+    this.updateErrorMessage(fieldName, field);
+    this._fields.set(fieldName, Bind.create(fieldName, field, (fieldName, waitingChange) => this.changeStarted(fieldName, waitingChange), (fieldName) => this.cancelWaitingChange(fieldName), (fieldName, newValue) => this.setFieldValue(fieldName, newValue)));
+    this.bindSearchOptionsLoader(fieldName, field);
+    this.applyEzUploadContext(fieldName, field);
+  }
+  changeStarted(fieldName, waitingChange) {
+    /**
+     * se o waitingChange não é blocante, add um event listener pra
+     * fazer o accept da promise
+     *
+     * se não tiver promise no waitingChange, eu crio uma e resolvo no bind
+     *
+     *
+     */
+    if (this._dataUnit.records.length === 0) {
+      this._dataUnit.addRecord();
+    }
+    if (!waitingChange.blocking && waitingChange.promise == undefined) {
+      const bind = this._fields.get(fieldName);
+      if (bind) {
+        waitingChange.promise = new Promise((resolve, reject) => {
+          bind.waitingChangePromiseResolve = resolve;
+          bind.waitingChangePromiseReject = reject;
+        });
+      }
+    }
+    this._dataUnit.startChange(fieldName, waitingChange);
+  }
+  cancelWaitingChange(fieldName) {
+    if (this._dataUnit.waitingForChange(fieldName)) {
+      this._dataUnit.cancelWaitingChange(fieldName);
+      const bind = this._fields.get(fieldName);
+      if (bind) {
+        bind.rejectWaitingChange(new WaitingChangeException("Change canceled", fieldName));
+      }
+    }
+  }
+  setFieldValue(fieldName, newValue) {
+    if (this._dataUnit.records.length === 0) {
+      this._dataUnit.addRecord();
+    }
+    this._dataUnit.clearInvalid(this.getCurrentRecordId(), fieldName);
+    this._dataUnit.setFieldValue(fieldName, newValue);
+    if (this._dataUnit.waitingForChange(fieldName)) {
+      const bind = this._fields.get(fieldName);
+      if (bind) {
+        bind.acceptWaitingChange();
+      }
+    }
+  }
+  bindSearchOptionsLoader(fieldName, field) {
+    if (field.nodeName === "EZ-SEARCH" && field["optionLoader"] == undefined) {
+      const loader = ApplicationContext.getContextValue("__EZUI__SEARCH__OPTION__LOADER__");
+      if (loader) {
+        field["optionLoader"] = (arg) => {
+          return loader(arg, fieldName, this._dataUnit);
+        };
+      }
+    }
+  }
+  applyEzUploadContext(fieldName, field) {
+    var _a, _b;
+    if (field.nodeName === "EZ-UPLOAD") {
+      field["urlUpload"] = ApplicationContext.getContextValue("__EZUI__UPLOAD__ADD__URL__");
+      field["urlDelete"] = ApplicationContext.getContextValue("__EZUI__UPLOAD__DEL__URL__");
+      const descriptor = this._dataUnit.getField(fieldName);
+      const destination = (_a = descriptor.properties) === null || _a === void 0 ? void 0 : _a.DESTINATION;
+      if (destination) {
+        field["requestHeaders"] = { XTRAINF: `{"destination": "${destination}"}` };
+      }
+      field["maxFiles"] = ((_b = descriptor.properties) === null || _b === void 0 ? void 0 : _b.MAX_FILES) || 0;
+    }
+  }
+  interceptAction(action) {
+    if (action.type === Action.RECORDS_COPIED) {
+      const cleanFields = this._formMetadata.getCleanOnCopyFields();
+      if (cleanFields) {
+        const records = action.payload;
+        return new DataUnitAction(Action.RECORDS_COPIED, records.map(record => {
+          const newRecord = Object.assign({}, record);
+          cleanFields.forEach(fieldName => delete newRecord[fieldName]);
+          return newRecord;
+        }));
+      }
+    }
+    if (action.type === Action.SAVING_DATA) {
+      return new Promise((resolve) => {
+        this.validate()
+          .then(() => resolve(action))
+          .catch(() => { });
+      });
+    }
+    if (action.type === Action.RECORDS_ADDED) {
+      const defaultValues = this.getDefaultValues();
+      if (defaultValues) {
+        const records = action.payload;
+        return new DataUnitAction(Action.RECORDS_ADDED, records.map(record => {
+          return Object.assign(Object.assign({}, record), defaultValues);
+        }));
+      }
+    }
+    return action;
+  }
+  getDefaultValues() {
+    var _a;
+    const rawDefaultValues = (_a = this._formMetadata) === null || _a === void 0 ? void 0 : _a.getDefaultValues();
+    if (rawDefaultValues) {
+      const defaultValues = {};
+      for (const field in rawDefaultValues) {
+        defaultValues[field] = this._dataUnit.valueFromString(field, rawDefaultValues[field]);
+      }
+      return defaultValues;
+    }
+    return undefined;
+  }
+}
+class Bind {
+  constructor() {
+    this.listen = true;
+    this.startChangeEventName = "ezStartChange";
+    this.cancelWaitingChangeEventName = "ezCancelWaitingChange";
+    this.changeEventName = "ezChange";
+  }
+  destroy() {
+    this.field.removeEventListener(this.startChangeEventName, this.startChangeListener);
+    this.field.removeEventListener(this.cancelWaitingChangeEventName, this.cancelWaitingChangeListener);
+    this.field.removeEventListener(this.changeEventName, this.changeListener);
+  }
+  acceptWaitingChange() {
+    if (this.waitingChangePromiseResolve) {
+      this.waitingChangePromiseResolve();
+      this.waitingChangePromiseReject = undefined;
+      this.waitingChangePromiseResolve = undefined;
+    }
+  }
+  rejectWaitingChange(reason) {
+    if (this.waitingChangePromiseReject) {
+      this.waitingChangePromiseReject(reason);
+      this.waitingChangePromiseReject = undefined;
+      this.waitingChangePromiseResolve = undefined;
+    }
+  }
+  static create(fieldName, field, startChangeCallback, cancelWaitingChangeCallback, changeCallback) {
+    const b = new Bind();
+    b.field = field;
+    b.fieldName = fieldName;
+    b.startChangeListener = (evt) => { if (b.listen)
+      startChangeCallback(fieldName, evt.detail); };
+    b.field.addEventListener(b.startChangeEventName, b.startChangeListener);
+    b.cancelWaitingChangeListener = () => { if (b.listen)
+      cancelWaitingChangeCallback(fieldName); };
+    b.field.addEventListener(b.cancelWaitingChangeEventName, b.cancelWaitingChangeListener);
+    b.changeListener = (evt) => { if (b.listen)
+      changeCallback(fieldName, evt.detail); };
+    b.field.addEventListener(b.changeEventName, b.changeListener);
+    return b;
+  }
+}
+
+/**
+ * Adapted from React: https://github.com/facebook/react/blob/master/packages/shared/formatProdErrorMessage.js
+ *
+ * Do not require this module directly! Use normal throw error calls. These messages will be replaced with error codes
+ * during build.
+ * @param {number} code
+ */
+function formatProdErrorMessage(code) {
+  return "Minified Redux error #" + code + "; visit https://redux.js.org/Errors?code=" + code + " for the full message or " + 'use the non-minified dev environment for full errors. ';
+}
+
+// Inlined version of the `symbol-observable` polyfill
+var $$observable = (function () {
+  return typeof Symbol === 'function' && Symbol.observable || '@@observable';
+})();
+
+/**
+ * These are private action types reserved by Redux.
+ * For any unknown actions, you must return the current state.
+ * If the current state is undefined, you must return the initial state.
+ * Do not reference these action types directly in your code.
+ */
+var randomString = function randomString() {
+  return Math.random().toString(36).substring(7).split('').join('.');
+};
+
+var ActionTypes = {
+  INIT: "@@redux/INIT" + randomString(),
+  REPLACE: "@@redux/REPLACE" + randomString(),
+  PROBE_UNKNOWN_ACTION: function PROBE_UNKNOWN_ACTION() {
+    return "@@redux/PROBE_UNKNOWN_ACTION" + randomString();
+  }
+};
+
+/**
+ * @param {any} obj The object to inspect.
+ * @returns {boolean} True if the argument appears to be a plain object.
+ */
+function isPlainObject(obj) {
+  if (typeof obj !== 'object' || obj === null) return false;
+  var proto = obj;
+
+  while (Object.getPrototypeOf(proto) !== null) {
+    proto = Object.getPrototypeOf(proto);
+  }
+
+  return Object.getPrototypeOf(obj) === proto;
+}
+
+/**
+ * @deprecated
+ *
+ * **We recommend using the `configureStore` method
+ * of the `@reduxjs/toolkit` package**, which replaces `createStore`.
+ *
+ * Redux Toolkit is our recommended approach for writing Redux logic today,
+ * including store setup, reducers, data fetching, and more.
+ *
+ * **For more details, please read this Redux docs page:**
+ * **https://redux.js.org/introduction/why-rtk-is-redux-today**
+ *
+ * `configureStore` from Redux Toolkit is an improved version of `createStore` that
+ * simplifies setup and helps avoid common bugs.
+ *
+ * You should not be using the `redux` core package by itself today, except for learning purposes.
+ * The `createStore` method from the core `redux` package will not be removed, but we encourage
+ * all users to migrate to using Redux Toolkit for all Redux code.
+ *
+ * If you want to use `createStore` without this visual deprecation warning, use
+ * the `legacy_createStore` import instead:
+ *
+ * `import { legacy_createStore as createStore} from 'redux'`
+ *
+ */
+
+function createStore(reducer, preloadedState, enhancer) {
+  var _ref2;
+
+  if (typeof preloadedState === 'function' && typeof enhancer === 'function' || typeof enhancer === 'function' && typeof arguments[3] === 'function') {
+    throw new Error(formatProdErrorMessage(0) );
+  }
+
+  if (typeof preloadedState === 'function' && typeof enhancer === 'undefined') {
+    enhancer = preloadedState;
+    preloadedState = undefined;
+  }
+
+  if (typeof enhancer !== 'undefined') {
+    if (typeof enhancer !== 'function') {
+      throw new Error(formatProdErrorMessage(1) );
+    }
+
+    return enhancer(createStore)(reducer, preloadedState);
+  }
+
+  if (typeof reducer !== 'function') {
+    throw new Error(formatProdErrorMessage(2) );
+  }
+
+  var currentReducer = reducer;
+  var currentState = preloadedState;
+  var currentListeners = [];
+  var nextListeners = currentListeners;
+  var isDispatching = false;
+  /**
+   * This makes a shallow copy of currentListeners so we can use
+   * nextListeners as a temporary list while dispatching.
+   *
+   * This prevents any bugs around consumers calling
+   * subscribe/unsubscribe in the middle of a dispatch.
+   */
+
+  function ensureCanMutateNextListeners() {
+    if (nextListeners === currentListeners) {
+      nextListeners = currentListeners.slice();
+    }
+  }
+  /**
+   * Reads the state tree managed by the store.
+   *
+   * @returns {any} The current state tree of your application.
+   */
+
+
+  function getState() {
+    if (isDispatching) {
+      throw new Error(formatProdErrorMessage(3) );
+    }
+
+    return currentState;
+  }
+  /**
+   * Adds a change listener. It will be called any time an action is dispatched,
+   * and some part of the state tree may potentially have changed. You may then
+   * call `getState()` to read the current state tree inside the callback.
+   *
+   * You may call `dispatch()` from a change listener, with the following
+   * caveats:
+   *
+   * 1. The subscriptions are snapshotted just before every `dispatch()` call.
+   * If you subscribe or unsubscribe while the listeners are being invoked, this
+   * will not have any effect on the `dispatch()` that is currently in progress.
+   * However, the next `dispatch()` call, whether nested or not, will use a more
+   * recent snapshot of the subscription list.
+   *
+   * 2. The listener should not expect to see all state changes, as the state
+   * might have been updated multiple times during a nested `dispatch()` before
+   * the listener is called. It is, however, guaranteed that all subscribers
+   * registered before the `dispatch()` started will be called with the latest
+   * state by the time it exits.
+   *
+   * @param {Function} listener A callback to be invoked on every dispatch.
+   * @returns {Function} A function to remove this change listener.
+   */
+
+
+  function subscribe(listener) {
+    if (typeof listener !== 'function') {
+      throw new Error(formatProdErrorMessage(4) );
+    }
+
+    if (isDispatching) {
+      throw new Error(formatProdErrorMessage(5) );
+    }
+
+    var isSubscribed = true;
+    ensureCanMutateNextListeners();
+    nextListeners.push(listener);
+    return function unsubscribe() {
+      if (!isSubscribed) {
+        return;
+      }
+
+      if (isDispatching) {
+        throw new Error(formatProdErrorMessage(6) );
+      }
+
+      isSubscribed = false;
+      ensureCanMutateNextListeners();
+      var index = nextListeners.indexOf(listener);
+      nextListeners.splice(index, 1);
+      currentListeners = null;
+    };
+  }
+  /**
+   * Dispatches an action. It is the only way to trigger a state change.
+   *
+   * The `reducer` function, used to create the store, will be called with the
+   * current state tree and the given `action`. Its return value will
+   * be considered the **next** state of the tree, and the change listeners
+   * will be notified.
+   *
+   * The base implementation only supports plain object actions. If you want to
+   * dispatch a Promise, an Observable, a thunk, or something else, you need to
+   * wrap your store creating function into the corresponding middleware. For
+   * example, see the documentation for the `redux-thunk` package. Even the
+   * middleware will eventually dispatch plain object actions using this method.
+   *
+   * @param {Object} action A plain object representing “what changed”. It is
+   * a good idea to keep actions serializable so you can record and replay user
+   * sessions, or use the time travelling `redux-devtools`. An action must have
+   * a `type` property which may not be `undefined`. It is a good idea to use
+   * string constants for action types.
+   *
+   * @returns {Object} For convenience, the same action object you dispatched.
+   *
+   * Note that, if you use a custom middleware, it may wrap `dispatch()` to
+   * return something else (for example, a Promise you can await).
+   */
+
+
+  function dispatch(action) {
+    if (!isPlainObject(action)) {
+      throw new Error(formatProdErrorMessage(7) );
+    }
+
+    if (typeof action.type === 'undefined') {
+      throw new Error(formatProdErrorMessage(8) );
+    }
+
+    if (isDispatching) {
+      throw new Error(formatProdErrorMessage(9) );
+    }
+
+    try {
+      isDispatching = true;
+      currentState = currentReducer(currentState, action);
+    } finally {
+      isDispatching = false;
+    }
+
+    var listeners = currentListeners = nextListeners;
+
+    for (var i = 0; i < listeners.length; i++) {
+      var listener = listeners[i];
+      listener();
+    }
+
+    return action;
+  }
+  /**
+   * Replaces the reducer currently used by the store to calculate the state.
+   *
+   * You might need this if your app implements code splitting and you want to
+   * load some of the reducers dynamically. You might also need this if you
+   * implement a hot reloading mechanism for Redux.
+   *
+   * @param {Function} nextReducer The reducer for the store to use instead.
+   * @returns {void}
+   */
+
+
+  function replaceReducer(nextReducer) {
+    if (typeof nextReducer !== 'function') {
+      throw new Error(formatProdErrorMessage(10) );
+    }
+
+    currentReducer = nextReducer; // This action has a similiar effect to ActionTypes.INIT.
+    // Any reducers that existed in both the new and old rootReducer
+    // will receive the previous state. This effectively populates
+    // the new state tree with any relevant data from the old one.
+
+    dispatch({
+      type: ActionTypes.REPLACE
+    });
+  }
+  /**
+   * Interoperability point for observable/reactive libraries.
+   * @returns {observable} A minimal observable of state changes.
+   * For more information, see the observable proposal:
+   * https://github.com/tc39/proposal-observable
+   */
+
+
+  function observable() {
+    var _ref;
+
+    var outerSubscribe = subscribe;
+    return _ref = {
+      /**
+       * The minimal observable subscription method.
+       * @param {Object} observer Any object that can be used as an observer.
+       * The observer object should have a `next` method.
+       * @returns {subscription} An object with an `unsubscribe` method that can
+       * be used to unsubscribe the observable from the store, and prevent further
+       * emission of values from the observable.
+       */
+      subscribe: function subscribe(observer) {
+        if (typeof observer !== 'object' || observer === null) {
+          throw new Error(formatProdErrorMessage(11) );
+        }
+
+        function observeState() {
+          if (observer.next) {
+            observer.next(getState());
+          }
+        }
+
+        observeState();
+        var unsubscribe = outerSubscribe(observeState);
+        return {
+          unsubscribe: unsubscribe
+        };
+      }
+    }, _ref[$$observable] = function () {
+      return this;
+    }, _ref;
+  } // When a store is created, an "INIT" action is dispatched so that every
+  // reducer returns their initial state. This effectively populates
+  // the initial state tree.
+
+
+  dispatch({
+    type: ActionTypes.INIT
+  });
+  return _ref2 = {
+    dispatch: dispatch,
+    subscribe: subscribe,
+    getState: getState,
+    replaceReducer: replaceReducer
+  }, _ref2[$$observable] = observable, _ref2;
+}
+
+const inicialState = {};
+///////////////////////////////     REDUCERS     ///////////////////////////////
+function formReducer(state = inicialState, action) {
+  switch (action.type) {
+    case FormActions.METADATA_LOADED:
+      return Object.assign(Object.assign({}, state), { formMetadata: action.payload, currentSheet: undefined });
+    case FormActions.CHANGE_TAB:
+      return Object.assign(Object.assign({}, state), { currentSheet: action.payload });
+    default:
+      return state;
+  }
+}
+/////////////////////////////// ACTION CREATORS ///////////////////////////////
+function loadMetadata(formMetadata) {
+  return {
+    type: FormActions.METADATA_LOADED,
+    payload: formMetadata
+  };
+}
+function changeTab(currentSheet) {
+  return {
+    type: FormActions.CHANGE_TAB,
+    payload: typeof currentSheet === "string" ? currentSheet : currentSheet.tabKey
+  };
+}
+///////////////////////////////    SELECTORS    ///////////////////////////////
+function selectFormMetadata(state) {
+  return state.formMetadata;
+}
+function selectCurrentSheetId(state) {
+  return state.currentSheet;
+}
+function selectCurrentSheet(state) {
+  const currentSheetId = selectCurrentSheetId(state);
+  return currentSheetId ? state.formMetadata.getSheet(currentSheetId) : Array.from(state.formMetadata.getAllSheets().values())[0];
+}
+///////////////////////////////      TYPES      ///////////////////////////////
+var FormActions;
+(function (FormActions) {
+  FormActions["METADATA_LOADED"] = "FORM/METADATA_LOADED";
+  FormActions["CHANGE_TAB"] = "FORM/CHANGE_TAB";
+})(FormActions || (FormActions = {}));
+
+const ezFormCss = ".sc-ez-form-h{display:flex;flex-direction:column;width:100%}.dynamic-content.sc-ez-form ez-collapsible-box.sc-ez-form{--ez-collapsible-box__header--padding-right:var(--space-small, 6px);--ez-collapsible-box__header--padding-left:var(--space-small, 6px)}";
+
+const EzForm = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.ezReady = createEvent(this, "ezReady", 7);
+    this.formItemsReady = createEvent(this, "formItemsReady", 7);
+    this.onDataUnitAction = (action) => {
+      if (action.type === Action.METADATA_LOADED) {
+        this.processMetadata();
+      }
+    };
+    this.dataUnit = undefined;
+    this.config = undefined;
+    this.recordsValidator = undefined;
+  }
+  /**
+   * Realiza validação no conteúdo de todos os campos.
+   */
+  validate() {
+    return this._dataBinder.validate();
+  }
+  observeConfig() {
+    this.processMetadata();
+  }
+  getDynamicContent() {
+    var _a;
+    const formMD = selectFormMetadata(this._store.getState());
+    if (!formMD) {
+      return null;
+    }
+    const allSheets = Array.from(formMD.getAllSheets().values());
+    const currentSheet = selectCurrentSheet((_a = this._store) === null || _a === void 0 ? void 0 : _a.getState());
+    let result = [];
+    if (allSheets.length > 1) {
+      const tabs = allSheets.map((sheet, index) => {
+        return { tabKey: sheet.name, label: sheet.label, index };
+      });
+      const idTabSelector = `selector`;
+      result.push(h("ez-tabselector", { tabs: this.buildIdTabSelector(tabs), onEzChange: (evt) => this._store.dispatch(changeTab(evt.detail)), selectedTab: currentSheet.name, "data-element-id": idTabSelector }));
+    }
+    result = result.concat(this.buildFormContent(currentSheet));
+    return result;
+  }
+  buildFormContent(currentSheet) {
+    const fields = currentSheet === null || currentSheet === void 0 ? void 0 : currentSheet.fields;
+    if (currentSheet == undefined) {
+      return;
+    }
+    const idFormSheet = `${StringUtils.replaceAccentuatedChars(StringUtils.toCamelCase(currentSheet === null || currentSheet === void 0 ? void 0 : currentSheet.label), false)}_selectorContainer`;
+    return (h("div", { class: "dynamic-content", "data-element-id": idFormSheet }, h("ez-form-view", { class: "ez-row ez-padding-vertical--small", fields: fields })));
+  }
+  processMetadata() {
+    if (!this.isStatic() && this.dataUnit && this._store) {
+      const metadata = buildFormMetadata(this.config, this.dataUnit);
+      this._store.dispatch(loadMetadata(metadata));
+    }
+  }
+  isStatic() {
+    var _a;
+    return ((_a = this._staticFields) === null || _a === void 0 ? void 0 : _a.length) > 0;
+  }
+  componentWillLoad() {
+    if (this.dataUnit === undefined) {
+      this.dataUnit = new DataUnit("ez-form");
+    }
+    this.dataUnit.subscribe(this.onDataUnitAction);
+    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();
+    const dataInfo = { dataUnit: this.dataUnit };
+    ElementIDUtils.addIDInfo(this._element, null, dataInfo);
+  }
+  componentDidRender() {
+    const metadata = selectFormMetadata(this._store.getState());
+    metadata.addRequiredFields(this._staticFields.filter(f => f.dataset.required).map(f => f.dataset.fieldName));
+    this._dataBinder.bind(Array.from(this._element.querySelectorAll("[data-field-name]")), this.dataUnit.dataUnitId, metadata, this.recordsValidator);
+    this.ezReady.emit();
+  }
+  disconnectedCallback() {
+    this.dataUnit.unsubscribe(this.onDataUnitAction);
+    this._dataBinder.onDisconnectedCallback();
+  }
+  buildIdTabSelector(tabs) {
+    if (tabs) {
+      tabs.forEach(tab => tab[ElementIDUtils.DATA_ELEMENT_ID_ATTRIBUTE_NAME] = StringUtils.toCamelCase(tab.label));
+    }
+    return tabs;
+  }
+  render() {
+    return (h(Host, null, this.isStatic() ? null : this.getDynamicContent()));
+  }
+  get _element() { return getElement(this); }
+  static get watchers() { return {
+    "config": ["observeConfig"]
+  }; }
+};
+EzForm.style = ezFormCss;
+
+export { EzForm as ez_form };