@sankhyalabs/ezui 5.22.0-dev.5 → 5.22.0-dev.51

package/dist/esm/{ez-dropdown.entry.js → ez-dropdown_2.entry.js}

@@ -283,6 +283,7 @@ const EzDropdown = class {
     this.ezClick = createEvent(this, "ezClick", 7);
     this.ezSubActionClick = createEvent(this, "ezSubActionClick", 7);
     this.ezOutsideClick = createEvent(this, "ezOutsideClick", 7);
+    this.ezHover = createEvent(this, "ezHover", 7);
     this._itemList = {};
     this._submenuList = [];
     this._openedMenuList = {};
@@ -403,14 +404,19 @@ const EzDropdown = class {
     }
     return groupItems.map((item) => {
       var _a;
-      return (item.type !== "divider"
-        ? h("div", Object.assign({ ref: (ref) => this._itemList[item.id] = ref, class: "ez-dropdown__item", "data-level": level }, { [ElementIDUtils.DATA_ELEMENT_ID_ATTRIBUTE_NAME]: ElementIDUtils.getInternalIDInfo(`${item.id}_ezDropdownItem`) }), h("div", { class: "ez-dropdown__item-content", onClick: (evt) => this.onItemClick(evt, item), onMouseOver: (evt) => this.onShowSubmenu(evt, item) }, this.itemBuilder
-          ? this.getContainerItemBuilder(item, level, isLockedLevels, hasIcon, hasChildren)
-          : this.defaultItemBuilder(item, isLockedLevels, hasIcon, hasChildren)), ((_a = item.children) === null || _a === void 0 ? void 0 : _a.length) > 0 &&
-          !isLockedLevels &&
-          hasChildren &&
-          h("div", { ref: (ref) => this._submenuList.push(ref), class: "ez-dropdown__submenu ez-dropdown__submenu--hide" }, this.renderDropdown(item.children, counterLevel)))
-        : h("hr", Object.assign({ class: "ez-dropdown__divider" }, { [ElementIDUtils.DATA_ELEMENT_ID_ATTRIBUTE_NAME]: ElementIDUtils.getInternalIDInfo(`${item.id}_ezDropdownDivider`) })));
+      switch (item.type) {
+        case "loading":
+          return (h("div", { class: "ez-dropdown__item" }, h("ez-skeleton", { width: '200px' })));
+        case "divider":
+          return (h("hr", Object.assign({ class: "ez-dropdown__divider" }, { [ElementIDUtils.DATA_ELEMENT_ID_ATTRIBUTE_NAME]: ElementIDUtils.getInternalIDInfo(`${item.id}_ezDropdownDivider`) })));
+        case "item":
+          return (h("div", Object.assign({ ref: (ref) => this._itemList[item.id] = ref, class: "ez-dropdown__item", "data-level": level }, { [ElementIDUtils.DATA_ELEMENT_ID_ATTRIBUTE_NAME]: ElementIDUtils.getInternalIDInfo(`${item.id}_ezDropdownItem`) }), h("div", { class: "ez-dropdown__item-content", onClick: (evt) => this.onItemClick(evt, item), onMouseOver: (evt) => this.onShowSubmenu(evt, item), onMouseEnter: () => this.ezHover.emit(item) }, this.itemBuilder
+            ? this.getContainerItemBuilder(item, level, isLockedLevels, hasIcon, hasChildren)
+            : this.defaultItemBuilder(item, isLockedLevels, hasIcon, hasChildren)), ((_a = item.children) === null || _a === void 0 ? void 0 : _a.length) > 0 &&
+            !isLockedLevels &&
+            hasChildren &&
+            h("div", { ref: (ref) => this._submenuList.push(ref), class: "ez-dropdown__submenu ez-dropdown__submenu--hide" }, this.renderDropdown(item.children, counterLevel))));
+      }
     });
   }
   renderDropdown(branchItems = this.items, level = 1) {
@@ -514,4 +520,64 @@ const EzDropdown = class {
 };
 EzDropdown.style = ezDropdownCss;
 
-export { EzDropdown as ez_dropdown };
+const ALLOWED_ANIMATIONS = ['progress', 'progress-dark', 'pulse', 'false'];
+
+const ezSkeletonCss = ".skeleton {\n\tbox-sizing: border-box;\n\toutline: none;\n\toverflow: hidden;\n\tposition: relative;\n\n\tbackground:var(--skeleton-background,  #eff1f6) no-repeat;\n\n\tborder-radius: var(--skeleton-border-radius, 4px);\n\twidth: var(--skeleton-width, 100%);\n\theight: var(--skeleton-height, 20px);\n\tdisplay: inline-block;\n\tmargin-bottom: var(--skeleton-margin-bottom, 0px);\n\twill-change: transform;\n\n\t&:after,\n\t&:before {\n\t\tbox-sizing: border-box;\n\t}\n\n\t&.circle {\n\t\twidth: var(--skeleton-width, 40px);\n\t\theight: var(--skeleton-height, 40px);\n\t\tmargin-bottom: var(--skeleton-margin-bottom, 5px);\n\t\tborder-radius: var(--skeleton-border-radius, 50%);\n\t}\n\n\t&.rect {\n\t\tborder-radius: var(--skeleton-border-radius, 0px);\n\t}\n\n\t&.progress,\n\t&.progress-dark {\n\t\tanimation: progress 2s cubic-bezier(0.4, 0, 0.2, 1) infinite;\n\t\tbackground-size: 200px 100%;\n\t}\n\n\t&.progress {\n\t\tbackground-image: linear-gradient(\n\t\t\t90deg,\n\t\t\trgba(255, 255, 255, 0),\n\t\t\trgba(255, 255, 255, 0.6),\n\t\t\trgba(255, 255, 255, 0)\n\t\t);\n\t}\n\n\t&.progress-dark {\n\t\tbackground-image: linear-gradient(\n\t\t\t90deg,\n\t\t\ttransparent,\n\t\t\trgba(0, 0, 0, 0.2),\n\t\t\ttransparent\n\t\t);\n\t}\n\n\t&.pulse {\n\t\tanimation: pulse 1.5s cubic-bezier(0.4, 0, 0.2, 1) infinite;\n\t\tanimation-delay: 0.5s;\n\t}\n\n\t@media (prefers-reduced-motion: reduce) {\n\t\t&.pulse,\n\t\t&.progress-dark,\n\t\t&.progress {\n\t\t\tanimation: none;\n\t\t}\n\n\t\t&.progress,\n\t\t&.progress-dark {\n\t\t\tbackground-image: none;\n\t\t}\n\t}\n}\n\n@keyframes progress {\n\t0% {\n\t\tbackground-position: -200px 0;\n\t}\n\t100% {\n\t\tbackground-position: calc(200px + 100%) 0;\n\t}\n}\n\n@keyframes pulse {\n\t0% {\n\t\topacity: 1;\n\t}\n\t50% {\n\t\topacity: 0.4;\n\t}\n\t100% {\n\t\topacity: 1;\n\t}\n}";
+
+const EzSkeleton = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.items = [];
+    this.count = 1;
+    this.variant = 'text';
+    this.width = null;
+    this.height = null;
+    this.marginBottom = null;
+    this.animation = 'progress';
+  }
+  componentWillLoad() {
+    this.init();
+  }
+  componentWillUpdate() {
+    this.init();
+  }
+  init() {
+    this.items.length = this.count;
+    this.items.fill(1);
+    if (!ALLOWED_ANIMATIONS.includes(this.animation)) {
+      this.animation = 'progress';
+    }
+  }
+  get style() {
+    let dimenssionsStyles = {
+      width: null,
+      height: null,
+      marginBottom: null
+    };
+    if (this.width) {
+      dimenssionsStyles.width = this.width;
+    }
+    if (this.height) {
+      dimenssionsStyles.height = this.height;
+    }
+    if (this.marginBottom) {
+      dimenssionsStyles.marginBottom = this.marginBottom;
+    }
+    return dimenssionsStyles;
+  }
+  render() {
+    return this.items.map((_, index) => {
+      return (h("span", { key: index, class: {
+          circle: this.variant === 'circle',
+          rect: this.variant === 'rect',
+          progress: this.animation === 'progress',
+          'progress-dark': this.animation === 'progress-dark',
+          pulse: this.animation === 'pulse',
+          skeleton: true
+        }, "data-busy": "true", "data-valuemin": "0", "data-valuemax": "100", "data-valuetext": "Loading...", role: "progressbar", tabindex: "0", style: this.style }));
+    });
+  }
+};
+EzSkeleton.style = ezSkeletonCss;
+
+export { EzDropdown as ez_dropdown, EzSkeleton as ez_skeleton };

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

@@ -68,9 +68,10 @@ function buildNumeric(fieldName, fieldLabel, readOnly, precision, prettyPrecisio
     h("ez-number-input", { enabled: !readOnly, label: fieldLabel, precision: precision, prettyPrecision: prettyPrecision, "data-field-name": fieldName, "data-context-name": contextName, key: fieldName, canShowError: canShowError })));
 }
 
-const buildSearch = ({ name, label, readOnly, required, contextName, canShowError, optionLoader }) => {
+const buildSearch = ({ name, label, readOnly, required, contextName, canShowError, optionLoader, props }) => {
+  var _a;
   return (h("div", { class: "ez-col ez-col--sd-12 ez-padding-horizontal--small" },
-    h("ez-search", { enabled: !readOnly, suppressEmptyOption: required, label: label, "data-field-name": name, "data-context-name": contextName, key: name, canShowError: canShowError, optionLoader: optionLoader })));
+    h("ez-search", { enabled: !readOnly, suppressEmptyOption: required, label: label, "data-field-name": name, "data-context-name": contextName, key: name, canShowError: canShowError, optionLoader: optionLoader, ignoreLimitCharsToSearch: (_a = props.ignoreLimitCharsToSearch) !== null && _a !== void 0 ? _a : false })));
 };
 
 const buildTextArea = ({ name, label, readOnly, contextName, rows, canShowError }) => {
@@ -78,9 +79,9 @@ const buildTextArea = ({ name, label, readOnly, contextName, rows, canShowError
     h("ez-text-area", { enabled: !readOnly, label: label, "data-field-name": name, "data-context-name": contextName, rows: rows, canShowError: canShowError })));
 };
 
-const buildTextInput = ({ name, label, readOnly, contextName, canShowError }) => {
+const buildTextInput = ({ name, label, readOnly, contextName, canShowError, props }) => {
   return (h("div", { class: "ez-col ez-col--sd-12 ez-padding-horizontal--small" },
-    h("ez-text-input", { label: label, "data-field-name": name, "data-context-name": contextName, key: name, enabled: !readOnly, canShowError: canShowError })));
+    h("ez-text-input", { label: label, "data-field-name": name, "data-context-name": contextName, key: name, enabled: !readOnly, canShowError: canShowError, mask: props === null || props === void 0 ? void 0 : props.mask, "clean-value-mask": props === null || props === void 0 ? void 0 : props.cleanValueMask })));
 };
 
 const uiBuilders = new Map();

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

@@ -1,6 +1,6 @@
 import { r as registerInstance, c as createEvent, h, f as forceUpdate, H as Host, g as getElement } from './index-5a720e56.js';
-import { DateUtils, Action, StringUtils, ApplicationContext, WaitingChangeException, DataUnitAction, DataUnit, ElementIDUtils } from '@sankhyalabs/core';
-import { b as buildFieldMetadata, R as RecordValidationProcessor } from './RecordValidationProcessor-b00b8b77.js';
+import { DateUtils, Action, StringUtils, DataUnit, ElementIDUtils } from '@sankhyalabs/core';
+import { b as buildFieldMetadata, D as DataBinder } from './DataBinder-02fa9bb9.js';
 import './ApplicationUtils-eaf91331.js';
 import './DialogType-54a62731.js';
 
@@ -101,7 +101,7 @@ const buildFormMetadata = (config, dataUnit, includeDetails = false) => {
         return;
       }
       const descriptor = dataUnit.getField(field.name);
-      if (descriptor && tabConfig.visible) {
+      if (descriptor && descriptor.visible && tabConfig.visible) {
         if (!sheets.has(tabConfig)) {
           sheets.set(tabConfig, []);
         }
@@ -179,327 +179,6 @@ const buildDetailSheet = (child) => {
   };
 };
 
-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._uuid = StringUtils.generateUUID();
-    this._fields = new Map();
-    this._dataUnit = dataUnit;
-    this.applyDefaultValues();
-    this._dataUnit.subscribe(this.onDataUnitEvent);
-    this._dataUnit.addInterceptor(this);
-    this.setContextDataBinder(dataUnit);
-  }
-  get dataBinderId() {
-    return this._uuid;
-  }
-  setContextDataBinder(dataUnit) {
-    const dataBindersByDataUnit = ApplicationContext.getContextValue("__DATABINDER_BY_DATAUNIT__") || new Map();
-    const dataBinders = [...(dataBindersByDataUnit.get(dataUnit.dataUnitId) || []), this];
-    dataBindersByDataUnit.set(dataUnit.dataUnitId, dataBinders);
-    ApplicationContext.setContextValue("__DATABINDER_BY_DATAUNIT__", dataBindersByDataUnit);
-  }
-  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);
-  }
-  disconnectDataUnit() {
-    const dataBindersByDataUnit = ApplicationContext.getContextValue("__DATABINDER_BY_DATAUNIT__") || new Map();
-    const dataBinders = dataBindersByDataUnit.get(this._dataUnit.dataUnitId);
-    const dataBindersFiltered = dataBinders.filter((dataBinder) => dataBinder.dataBinderId !== this.dataBinderId);
-    dataBindersByDataUnit.set(this._dataUnit.dataUnitId, dataBindersFiltered);
-    ApplicationContext.setContextValue("__DATABINDER_BY_DATAUNIT__", dataBindersByDataUnit);
-  }
-  onDisconnectedCallback() {
-    this._dataUnit.unsubscribe(this.onDataUnitEvent);
-    this._dataUnit.removeInterceptor(this);
-    this.disconnectDataUnit();
-  }
-  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);
-    }
-  }
-  setFocus(fieldName) {
-    if (!this._fields.has(fieldName)) {
-      return;
-    }
-    const fieldElement = this._fields.get(fieldName).field;
-    if (typeof fieldElement["setFocus"] != "function") {
-      return;
-    }
-    fieldElement["setFocus"]();
-  }
-  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();
-  }
-  static async validateByDataunit(dataUnit) {
-    try {
-      const dataBindersByDataUnit = ApplicationContext.getContextValue("__DATABINDER_BY_DATAUNIT__");
-      const dataBinders = dataBindersByDataUnit.get(dataUnit.dataUnitId) || [];
-      await Promise.all(dataBinders.map((dataBinder) => dataBinder.validate()));
-      return true;
-    }
-    catch (_a) {
-      return false;
-    }
-  }
-  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);
-    const record = this._dataUnit.getSelectedRecord();
-    this._dataUnit.setFieldValue(fieldName, newValue, record ? [record.__record__id__] : undefined);
-    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
  *
@@ -963,6 +642,7 @@ const EzForm = class {
     if (this.dataUnit === undefined) {
       this.dataUnit = new DataUnit("ez-form");
     }
+    this.dataUnit.unsubscribe(this.onDataUnitAction);
     this.dataUnit.subscribe(this.onDataUnitAction);
     this._dataBinder = new DataBinder(this.dataUnit);
     this._store = createStore(formReducer);