@sankhyalabs/ezui 1.1.79 → 1.1.82

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

@@ -0,0 +1,724 @@
+import { h, r as registerInstance, f as forceUpdate, H as Host, g as getElement } from './index-d80a8d1f.js';
+import { U as UserInterface, D as DataUnit, A as Action } from './index-2bb35caf.js';
+import { A as ApplicationUtils } from './ApplicationUtils-01280a9d.js';
+
+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 })));
+};
+
+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 })));
+}
+
+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 })));
+};
+
+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 })));
+};
+
+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 })));
+};
+
+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 })));
+};
+
+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 })));
+}
+
+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);
+};
+
+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
+ *
+ * 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;
+}
+
+/**
+ * Creates a Redux store that holds the state tree.
+ * The only way to change the data in the store is to call `dispatch()` on it.
+ *
+ * There should only be a single store in your app. To specify how different
+ * parts of the state tree respond to actions, you may combine several reducers
+ * into a single reducer function by using `combineReducers`.
+ *
+ * @param {Function} reducer A function that returns the next state tree, given
+ * the current state tree and the action to handle.
+ *
+ * @param {any} [preloadedState] The initial state. You may optionally specify it
+ * to hydrate the state from the server in universal apps, or to restore a
+ * previously serialized user session.
+ * If you use `combineReducers` to produce the root reducer function, this must be
+ * an object with the same shape as `combineReducers` keys.
+ *
+ * @param {Function} [enhancer] The store enhancer. You may optionally specify it
+ * to enhance the store with third-party capabilities such as middleware,
+ * time travel, persistence, etc. The only store enhancer that ships with Redux
+ * is `applyMiddleware()`.
+ *
+ * @returns {Store} A Redux store that lets you read the state, dispatch actions
+ * and subscribe to changes.
+ */
+
+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 });
+    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: currentSheet
+  };
+}
+///////////////////////////////    SELECTORS    ///////////////////////////////
+function selectFormMetadata(state) {
+  return state.formMetadata;
+}
+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 = {}));
+
+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);
+      });
+    });
+  }
+  bind(fields) {
+    fields.forEach(fieldElement => {
+      const fieldName = fieldElement.dataset.fieldName;
+      this.updateBind(fieldName, fieldElement);
+      this.updateValue(fieldName, fieldElement);
+    });
+  }
+  updateValue(fieldName, field) {
+    field["value"] = this._dataUnit.getFieldValue(fieldName);
+  }
+  updateBind(fieldName, field) {
+    const oldBind = this._fields.get(fieldName);
+    if (oldBind) {
+      oldBind.destroy();
+    }
+    this._fields.set(fieldName, Bind.create(fieldName, field, (fieldName, newValue) => this.setFieldValue(fieldName, newValue)));
+  }
+  setFieldValue(fieldName, newValue) {
+    if (this._dataUnit.records.length === 0) {
+      this._dataUnit.addRecord();
+    }
+    this._dataUnit.setFieldValue(fieldName, newValue);
+  }
+}
+class Bind {
+  destroy() {
+    this.field.removeEventListener(this.eventName, this.eventListener);
+  }
+  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;
+  }
+}
+
+const ezFormCss = "ez-form{display:flex;flex-direction:column;width:100%}";
+
+let EzForm = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+  }
+  submit() {
+    return Promise.resolve();
+  }
+  cancel() {
+    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;
+        }
+      }
+      accept();
+    });
+  }
+  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";
+      }
+      else {
+        fieldElem["errorMessage"] = "";
+      }
+    });
+    const isValid = invalidFields.length === 0;
+    if (!isValid) {
+      ApplicationUtils.info("Há pelo menos um campo obrigatório não preenchido.");
+    }
+    return isValid;
+  }
+  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;
+    }
+    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;
+  }
+  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));
+    }
+  }
+  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(action => {
+      if (action.type === Action.METADATA_LOADED) {
+        this.processMetadata();
+      }
+    });
+    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._dataBinder.bind(Array.from(this._element.querySelectorAll("[data-field-name]")));
+  }
+  render() {
+    return (h(Host, null, this.isStatic() ? null : this.getDynamicContent()));
+  }
+  get _element() { return getElement(this); }
+};
+EzForm.style = ezFormCss;
+
+export { EzForm as ez_form };