@sankhyalabs/ezui 1.1.77 → 1.1.80

package/dist/custom-elements/index.js

@@ -23,6 +23,88 @@ let EzLabelChip$2 = class extends HTMLElement$1 {
   static get style() { return ezActionChipCss; }
 };
 
+const ezApplicationCss = "";
+
+let EzApplication$1 = class extends HTMLElement$1 {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.applicationLoaded = createEvent(this, "applicationLoaded", 7);
+  }
+  componentWillLoad() {
+    //Initizalize application
+  }
+  componentDidLoad() {
+    this.applicationLoaded.emit(true);
+  }
+  render() {
+    return (h("div", null));
+  }
+  static get style() { return ezApplicationCss; }
+};
+
+const ezButtonCss = ":host{--ez-button--min-width:100px;--ez-button--height:42px;--ez-button__icon--width:18px;--ez-button__inline__icon--padding:12px;--ez-button--padding-top:var(--space--medium, 12px);--ez-button--padding-bottom:var(--space--medium, 12px);--ez-button--padding-right:var(--space--large, 24px);--ez-button--padding-left:var(--space--large, 24px);--ez-button--color:var(--text--primary, #FFF);--ez-button--font-size:var(--text--medium, 14px);--ez-button--font-family:var(--font-pattern, Arial);--ez-button--font-weight:var(--text-weight--large);--ez-button--background-color:var(--background--medium, #c0c0c0);--ez-button--border-radius:var(--border--radius-large, 12px);--ez-button--border:none;--ez-button--hover--background-color:var(--background--strong, var(--ez-button--background-color));--ez-button--disabled-color:var(--text--disable);--ez-button--disabled--background-color:var(--color--disable-secondary);--ez-button--focus--border:var(--ez-button--border);--ez-button--focus--box-shadow:none;--ez-button--link-color:var(--title--primary, '#C0C0C0')}ez-icon{--ez-icon--color:inherit}button{display:flex;align-items:center;justify-content:center;margin:0;cursor:pointer;transition:background-color 0.2s linear;min-width:var(--ez-button--min-width);height:var(--ez-button--height);font-family:var(--ez-button--font-family);font-size:var(--ez-button--font-size);font-weight:var(--ez-button--font-weight);padding:var(--ez-button--padding-top) var(--ez-button--padding-right) var(--ez-button--padding-bottom) var(--ez-button--padding-left);border-radius:var(--ez-button--border-radius);background-color:var(--ez-button--background-color);color:var(--ez-button--color);fill:var(--ez-button--color);border:var(--ez-button--border)}button:hover{background-color:var(--ez-button--hover--background-color)}button:focus{outline:none;border:var(--ez-button--focus--border);box-shadow:var(--ez-button--focus--box-shadow)}button:disabled{background-color:var(--ez-button--disabled--background-color);color:var(--ez-button--disabled-color);fill:var(--ez-button--disabled-color);border:none;cursor:no-drop}button.icon{padding:0px}button.small{width:32px;min-width:32px;height:32px}button.medium{width:42px;min-width:42px;height:42px}button.large{width:52px;min-width:52px;height:52px}.label-icon{display:flex;flex-direction:column;align-items:center;color:var(--ez-button--color)}.label-icon label{max-width:150px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer;font-family:var(--ez-button--font-family);font-size:var(--ez-button--font-size);font-weight:var(--ez-button--font-weight)}a{font-family:var(--ez-button--font-family);font-size:var(--ez-button--font-size);font-weight:var(--ez-button--font-weight);color:var(--ez-button--link-color);cursor:pointer;display:flex;align-items:center;justify-content:center;}";
+
+let EzButton$1 = class extends HTMLElement$1 {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    /**
+     * Deixa o botão disponível ou não para interação com o usuário.
+     */
+    this.enabled = true;
+    /**
+       * Define o modo de uso do botão; opções: icon, link e regular
+       */
+    this.mode = "regular";
+    /**
+     * Quando em modo "icon" pode-se escolher entre [small,medium,large] (somente para o modo "icon")
+     */
+    this.size = "medium";
+  }
+  getIconSize() {
+    return this.size;
+  }
+  handleSlotChange(ev) {
+    const slot = ev.target;
+    const content = slot.assignedElements()[0];
+    if (this.mode == "link") {
+      content.style.display = "inline";
+      if (slot.name == "leftIcon") {
+        content.style.paddingRight = "var(--ez-button__inline__icon--padding)";
+      }
+      else if (slot.name == "rightIcon") {
+        content.style.paddingLeft = "var(--ez-button__inline__icon--padding)";
+      }
+    }
+    else {
+      content.style.setProperty('--ez-icon--color', 'var(--ez-icon--color)');
+    }
+  }
+  render() {
+    if (this.mode == "icon") {
+      return (h("button", { class: "icon " + this.size, type: "button", disabled: !this.enabled }, h("ez-icon", { class: "icon", href: this.image, size: this.getIconSize(), onClick: evt => {
+          if (!this.enabled)
+            evt.stopPropagation();
+        } })));
+    }
+    else if (this.mode == "label-icon") {
+      return (h("div", { class: "label-icon" }, h("button", { class: "icon", type: "button", disabled: !this.enabled }, h("ez-icon", { class: "icon", href: this.image, size: "large", onClick: evt => {
+          if (!this.enabled)
+            evt.stopPropagation();
+        } })), h("label", { title: this.label }, this.label)));
+    }
+    else if (this.mode == "link") {
+      return (h("a", null, h("slot", { name: "leftIcon", onSlotchange: (ev) => { this.handleSlotChange(ev); } }), this.label, h("slot", { name: "rightIcon", onSlotchange: (ev) => { this.handleSlotChange(ev); } })));
+    }
+    else {
+      return (h("button", { type: "button", disabled: !this.enabled }, h("slot", { name: "leftIcon", onSlotchange: (ev) => { this.handleSlotChange(ev); } }), this.label, h("slot", { name: "rightIcon", onSlotchange: (ev) => { this.handleSlotChange(ev); } })));
+    }
+  }
+  static get style() { return ezButtonCss; }
+};
+
 /**
  * Classe com utiliários comuns para Strings.
  */
@@ -1278,7 +1360,7 @@ function updateSavedIds(stateManager, savedRecords) {
     return currentSelection;
 }
 
-class DataUnit$1 {
+class DataUnit {
     constructor(name) {
         this._name = name;
         this._stateManager = new StateManager([
@@ -1470,12 +1552,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";
@@ -1496,25 +1578,6 @@ var UserInterface;
     UserInterface["HTML"] = "HTML";
 })(UserInterface || (UserInterface = {}));
 
-class Application {
-    constructor() { }
-    static get() {
-        if (Application.instance === undefined) {
-            Application.instance = new Application();
-            Application.element = document.querySelector('ez-application');
-        }
-        return Application.instance;
-    }
-    onLoaded(listener) {
-        var _a;
-        (_a = Application.element) === null || _a === void 0 ? void 0 : _a.addEventListener('applicationLoaded', () => listener());
-    }
-    getResourceID() {
-        return "br.com.sankhya.mge.cad.parceiro"; //TODO: Remover mock
-    }
-}
-Application.element = null;
-
 var LoadStatus;
 (function (LoadStatus) {
     LoadStatus["DOM_LOADED"] = "DOM_LOADED";
@@ -1528,10 +1591,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,
@@ -7675,89 +7734,6 @@ function HeadersInstanceToPlainObject(headers) {
 //# sourceMappingURL=index.js.map
 });
 
-const ezApplicationCss = "";
-
-let EzApplication$1 = class extends HTMLElement$1 {
-  constructor() {
-    super();
-    this.__registerHost();
-    this.applicationLoaded = createEvent(this, "applicationLoaded", 7);
-  }
-  componentWillLoad() {
-    //Initizalize application
-    this.application = Application.get();
-  }
-  componentDidLoad() {
-    this.applicationLoaded.emit(true);
-  }
-  render() {
-    return (h("div", null));
-  }
-  static get style() { return ezApplicationCss; }
-};
-
-const ezButtonCss = ":host{--ez-button--min-width:100px;--ez-button--height:42px;--ez-button__icon--width:18px;--ez-button__inline__icon--padding:12px;--ez-button--padding-top:var(--space--medium, 12px);--ez-button--padding-bottom:var(--space--medium, 12px);--ez-button--padding-right:var(--space--large, 24px);--ez-button--padding-left:var(--space--large, 24px);--ez-button--color:var(--text--primary, #FFF);--ez-button--font-size:var(--text--medium, 14px);--ez-button--font-family:var(--font-pattern, Arial);--ez-button--font-weight:var(--text-weight--large);--ez-button--background-color:var(--background--medium, #c0c0c0);--ez-button--border-radius:var(--border--radius-large, 12px);--ez-button--border:none;--ez-button--hover--background-color:var(--background--strong, var(--ez-button--background-color));--ez-button--disabled-color:var(--text--disable);--ez-button--disabled--background-color:var(--color--disable-secondary);--ez-button--focus--border:var(--ez-button--border);--ez-button--focus--box-shadow:none;--ez-button--link-color:var(--title--primary, '#C0C0C0')}ez-icon{--ez-icon--color:inherit}button{display:flex;align-items:center;justify-content:center;margin:0;cursor:pointer;transition:background-color 0.2s linear;min-width:var(--ez-button--min-width);height:var(--ez-button--height);font-family:var(--ez-button--font-family);font-size:var(--ez-button--font-size);font-weight:var(--ez-button--font-weight);padding:var(--ez-button--padding-top) var(--ez-button--padding-right) var(--ez-button--padding-bottom) var(--ez-button--padding-left);border-radius:var(--ez-button--border-radius);background-color:var(--ez-button--background-color);color:var(--ez-button--color);fill:var(--ez-button--color);border:var(--ez-button--border)}button:hover{background-color:var(--ez-button--hover--background-color)}button:focus{outline:none;border:var(--ez-button--focus--border);box-shadow:var(--ez-button--focus--box-shadow)}button:disabled{background-color:var(--ez-button--disabled--background-color);color:var(--ez-button--disabled-color);fill:var(--ez-button--disabled-color);border:none;cursor:no-drop}button.icon{padding:0px}button.small{width:32px;min-width:32px;height:32px}button.medium{width:42px;min-width:42px;height:42px}button.large{width:52px;min-width:52px;height:52px}.label-icon{display:flex;flex-direction:column;align-items:center;color:var(--ez-button--color)}.label-icon label{max-width:150px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer;font-family:var(--ez-button--font-family);font-size:var(--ez-button--font-size);font-weight:var(--ez-button--font-weight)}a{font-family:var(--ez-button--font-family);font-size:var(--ez-button--font-size);font-weight:var(--ez-button--font-weight);color:var(--ez-button--link-color);cursor:pointer;display:flex;align-items:center;justify-content:center;}";
-
-let EzButton$1 = class extends HTMLElement$1 {
-  constructor() {
-    super();
-    this.__registerHost();
-    this.__attachShadow();
-    /**
-     * Deixa o botão disponível ou não para interação com o usuário.
-     */
-    this.enabled = true;
-    /**
-       * Define o modo de uso do botão; opções: icon, link e regular
-       */
-    this.mode = "regular";
-    /**
-     * Quando em modo "icon" pode-se escolher entre [small,medium,large] (somente para o modo "icon")
-     */
-    this.size = "medium";
-  }
-  getIconSize() {
-    return this.size;
-  }
-  handleSlotChange(ev) {
-    const slot = ev.target;
-    const content = slot.assignedElements()[0];
-    if (this.mode == "link") {
-      content.style.display = "inline";
-      if (slot.name == "leftIcon") {
-        content.style.paddingRight = "var(--ez-button__inline__icon--padding)";
-      }
-      else if (slot.name == "rightIcon") {
-        content.style.paddingLeft = "var(--ez-button__inline__icon--padding)";
-      }
-    }
-    else {
-      content.style.setProperty('--ez-icon--color', 'var(--ez-icon--color)');
-    }
-  }
-  render() {
-    if (this.mode == "icon") {
-      return (h("button", { class: "icon " + this.size, type: "button", disabled: !this.enabled }, h("ez-icon", { class: "icon", href: this.image, size: this.getIconSize(), onClick: evt => {
-          if (!this.enabled)
-            evt.stopPropagation();
-        } })));
-    }
-    else if (this.mode == "label-icon") {
-      return (h("div", { class: "label-icon" }, h("button", { class: "icon", type: "button", disabled: !this.enabled }, h("ez-icon", { class: "icon", href: this.image, size: "large", onClick: evt => {
-          if (!this.enabled)
-            evt.stopPropagation();
-        } })), h("label", { title: this.label }, this.label)));
-    }
-    else if (this.mode == "link") {
-      return (h("a", null, h("slot", { name: "leftIcon", onSlotchange: (ev) => { this.handleSlotChange(ev); } }), this.label, h("slot", { name: "rightIcon", onSlotchange: (ev) => { this.handleSlotChange(ev); } })));
-    }
-    else {
-      return (h("button", { type: "button", disabled: !this.enabled }, h("slot", { name: "leftIcon", onSlotchange: (ev) => { this.handleSlotChange(ev); } }), this.label, h("slot", { name: "rightIcon", onSlotchange: (ev) => { this.handleSlotChange(ev); } })));
-    }
-  }
-  static get style() { return ezButtonCss; }
-};
-
 const ezCalendarCss = ":host{--ez-calendar--font-family:var(--font-pattern, Arial);--ez-calendar--color:var(--title--primary, #626e82);--ez-calendar--text-shadow:var(--text-shadow, 0 0 0 #353535, 0 0 1px transparent);--ez-calendar__body--background-color:var(--background--xlight, #FFF);--ez-calendar__Time--background-color:var(--background--xlight, #FAFAFA);--ez-calendar__body--padding:var(--space--medium, 12px);--ez-calendar__body--border-radius:var(--border--radius-medium, 12px);--ez-calendar__body--shadow:var(--shadow, 0px 0px 16px 0px #000);--ez-calendar__header-line--stroke:2px;--ez-calendar__header-line--color:var(--color--strokes, #C0C0C0);--ez-calendar__nav-btn--fill:var(--text--primary, #008561);--ez-calendar__nav-btn--hover--fill:var(--color--primary, #350404);--ez-calendar__nav-btn--width:10px;--ez-calendar__nav-btn--height:16px;--ez-calendar__nav-btn--previous-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" version=\"1.1\" height=\"16px\" width=\"10px\"><path d=\"M 9.7808475,13.860393 3.9204526,8.0000004 9.7808475,2.0624965 7.9301965,0.28895552 0.21915255,8.0000004 7.9301965,15.711044 Z\"/></svg>');--ez-calendar__nav-btn--next-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" version=\"1.1\" height=\"16px\" width=\"10px\"><path d=\"M 0.21915251,13.860393 6.0795475,8.0000007 0.21915251,2.0624968 2.0698036,0.28895588 9.7808475,8.0000007 2.0698036,15.711044 Z\"/></svg>');--ez-calendar__cell--margin:0px var(--space--small, 12px);--ez-calendar__cell--width:var(--space--large, 24px);--ez-calendar__cell--padding:var(--space--extra-small, 3px) 0px;--ez-calendar__cell--border-radius:var(--border--radius-small, 6px);--ez-calendar__cell--over--background-color:var(--color--strokes, #E2F4EF);--ez-calendar__cell--outset--color:var(--color--strokes, #C0C0C0);--ez-calendar__cell--selected--background-color:var(--color--primary, #008561);--ez-calendar__cell--selected--color:var(--color--inverted, #FFF);--ez-calendar__btn-today--color:var(--color--primary);--ez-calendar__btn-today--hover--background-color:var(--color--strokes, #E2F4EF);--ez-calendar__btn-today--border-radius:var(--border--radius-small, 6px);position:relative;display:flex;user-select:none}.calendar{z-index:var(--more-visible, 2);display:flex;flex-direction:column;background-color:var(--ez-calendar__body--background-color);padding:var(--ez-calendar__body--padding);border-radius:var(--ez-calendar__body--border-radius);box-shadow:var(--ez-calendar__body--shadow)}.calendar__header{display:flex;justify-content:space-between;padding-bottom:var(--space--medium, 12px);margin:var(--space--small, 6px) var(--space--, 12px);font-family:var(--ez-calendar--font-family);color:var(--ez-calendar--color);text-shadow:var(--ez-calendar--text-shadow);border-bottom:solid var(--ez-calendar__header-line--stroke) var(--ez-calendar__header-line--color)}.calendar__btn-next,.calendar__btn-previous{outline:none;border:none;background-color:unset;cursor:pointer;padding:0px}.calendar__btn-next::after,.calendar__btn-previous::after{content:'';display:flex;background-color:var(--ez-calendar__nav-btn--fill);width:var(--ez-calendar__nav-btn--width);height:var(--ez-calendar__nav-btn--height)}.calendar__btn-previous::after{-webkit-mask-image:var(--ez-calendar__nav-btn--previous-image);mask-image:var(--ez-calendar__nav-btn--previous-image)}.calendar__btn-next::after{-webkit-mask-image:var(--ez-calendar__nav-btn--next-image);mask-image:var(--ez-calendar__nav-btn--next-image)}.calendar__btn-next:hover::after,.calendar__btn-previous:hover::after{background-color:var(--ez-calendar__nav-btn--hover--fill)}.calendar__lbl-month{font-weight:var(--text-weight--large, 600);font-size:var(--title--medium, 16px);font-family:var(--ez-calendar--font-family);color:var(--ez-calendar--color);text-shadow:var(--ez-calendar--text-shadow)}.calendar__line{display:flex;padding:0px;margin:0px}.calendar__cell{display:flex;justify-content:center;align-content:center;cursor:pointer;font-size:var(--text--small, 12px);font-family:var(--ez-calendar--font-family);color:var(--ez-calendar--color);text-shadow:var(--ez-calendar--text-shadow);padding:var(--ez-calendar__cell--padding);margin:var(--ez-calendar__cell--margin);min-width:var(--ez-calendar__cell--width);border-radius:var(--ez-calendar__cell--border-radius)}.calendar__cell:hover{background-color:var(--ez-calendar__cell--over--background-color)}.calendar__cell--secondary{color:var(--ez-calendar__cell--outset--color)}.calendar__cell--unselectable:hover{background-color:unset;border-radius:unset;cursor:unset}.calendar__cell--unselectable{font-weight:var(--text-weight--large, 600);font-family:var(--ez-calendar--font-family);color:var(--ez-calendar--color);text-shadow:var(--ez-calendar--text-shadow)}.calendar__cell--selected,.calendar__cell--selected:hover{background-color:var(--ez-calendar__cell--selected--background-color);color:var(--ez-calendar__cell--selected--color)}.calendar__body{padding:var(--space--small, 6px) 0px}.calendar__footer{display:flex;flex-direction:column}.calendar__btn-today{border:none;background-color:unset;cursor:pointer;font-weight:var(--text-weight--large, 600);font-size:var(--title--small);padding:var(--space--extra-small, 6px);font-family:var(--ez-calendar--font-family);text-shadow:var(--ez-calendar--text-shadow);color:var(--ez-calendar__btn-today--color);border-radius:var(--ez-calendar__btn-today--border-radius)}.calendar__btn-today:hover{background-color:var(--ez-calendar__btn-today--hover--background-color)}section{display:flex}.calendarTime{margin-left:-10px;display:flex;flex-direction:column;padding:12px 6px;padding-left:16px;padding-bottom:0px;background-color:var(--ez-calendar__Time--background-color);border-top-right-radius:var(--ez-calendar__body--border-radius);border-bottom-right-radius:var(--ez-calendar__body--border-radius);box-shadow:var(--ez-calendar__body--shadow)}.calendar__column{height:180px;padding:0px;margin:0px;overflow:auto}.calendar__column::-webkit-scrollbar{width:0px;max-width:0px;min-width:0px}.calendarTime__header{padding-left:6px;padding-right:6px;display:flex;justify-content:space-between;padding-bottom:var(--space--medium, 12px);margin:var(--space--small, 6px) var(--space--, 12px);font-weight:var(--text-weight--large, 600);font-size:var(--title--medium, 16px);font-family:var(--ez-calendar--font-family);color:var(--ez-calendar--color);text-shadow:var(--ez-calendar--text-shadow);border-bottom:solid var(--ez-calendar__header-line--stroke) var(--ez-calendar__header-line--color);font-family:var(--ez-calendar--font-family);color:var(--ez-calendar--color);text-shadow:var(--ez-calendar--text-shadow)}.separatorTime{color:#A2ABB9}.endHidden{-webkit-mask-image:linear-gradient(180deg, #000 calc(100% - 48px), transparent 100%)}";
 
 let EzCalendar$1 = class extends HTMLElement$1 {
@@ -7847,10 +7823,15 @@ let EzCalendar$1 = class extends HTMLElement$1 {
   }
   selectDate(d) {
     let newDate = d;
-    if (this.value) {
+    if (this.value && (this.time || this.showSeconds)) {
       newDate.setHours(this.value.getHours());
       newDate.setMinutes(this.value.getMinutes());
-      newDate.setSeconds(this.value.getSeconds());
+      if (this.showSeconds) {
+        newDate.setSeconds(this.value.getSeconds());
+      }
+      else {
+        newDate.setSeconds(0);
+      }
     }
     this.value = newDate;
     this.ezChange.emit();
@@ -8073,7 +8054,22 @@ let EzCollapsibleBox$1 = class extends HTMLElement$1 {
   static get style() { return ezCollapsibleBoxCss; }
 };
 
-const ezComboBoxCss = ":host{--ez-combo-box--height:42px;--ez-combo-box--width:100%;--ez-combo-box__icon--width:48px;--ez-combo-box--border-radius:var(--border--radius-medium, 12px);--ez-combo-box--border-radius-small:var(--border--radius-small, 6px);--ez-combo-box--font-size:var(--text--medium, 14px);--ez-combo-box--font-family:var(--font-pattern, Arial);--ez-combo-box--font-weight--large:var(--text-weight--large, 500);--ez-combo-box--font-weight--medium:var(--text-weight--medium, 400);--ez-combo-box--background-color--xlight:var(--background--xlight, #fff);--ez-combo-box--background-medium:var(--background--medium, #f0f3f7);--ez-combo-box__input--background-color:var(--background--medium, #e0e0e0);--ez-combo-box__input--border:var(--border--medium, 2px solid);--ez-combo-box__input--border-color:var(--ez-combo-box__input--background-color);--ez-combo-box__input--focus--border-color:var(--color--primary, #008561);--ez-combo-box__input--disabled--background-color:var(--color--disable-secondary, #F2F5F8);--ez-combo-box__input--disabled--color:var(--text--disable, #AFB6C0);--ez-combo-box__input--error--border-color:#CC2936;--ez-combo-box__btn-search--background-color:var(--text--primary, #626e82);--ez-combo-box__btn-search-disabled--background-color:var(--text--disable, #AFB6C0);--ez-combo-box__btn-search-hover--background-color:var(--color--primary, #4e4e4e);--ez-combo-box__btn-options--background-color:var(--text--primary, #626e82);--ez-combo-box__btn-options-disabled--background-color:var(--text--disable, #AFB6C0);--ez-combo-box__btn-options-hover--background-color:var(--color--primary, #4e4e4e);--ez-combo-box__label--color:var(--title--primary, #919191);--ez-combo-box__list-text--primary:var(--text--primary, #626e82);--ez-combo-box__list-height:calc(var(--ez-combo-box--font-size) + var(--ez-combo-box--space--medium));--ez-combo-box__drop-down-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" version=\"1.1\" height=\"16px\" width=\"16px\"><path d=\"M 1.8585859,3.0707069 7.9999998,9.2121212 14.141414,3.0707069 16,5.0101006 7.9999998,12.929293 0,4.9292932 Z\"/></svg>');--ez-combo-box__search-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" version=\"1.1\" height=\"22px\" width=\"22px\"><path d=\"m 9.4,2.3 c 4.1,0 7.4,3.2 7.4,7.2 0,1.8 -0.7,3.4 -1.8,4.7 l 0.3,0.3 h 0.9 l 5.7,5.6 -1.7,1.7 -5.7,-5.6 V 15.3 L 14.3,15 C 13,16.1 11.3,16.7 9.5,16.7 5.3,16.7 2,13.5 2,9.5 2,5.5 5.3,2.3 9.4,2.3 m 0,2.2 c -2.9,0 -5.1,2.2 -5.1,5 0,2.8 2.3,5 5.1,5 2.8,0 5.1,-2.2 5.1,-5 0,-2.8 -2.2,-5 -5.1,-5 z\"/></svg>');--ez-combo-box--space--medium:var(--space--medium, 12px);--ez-combo-box--space--small:var(--space--small, 6px);display:flex;flex-wrap:wrap;position:relative;width:var(--ez-combo-box--width)}ez-text-input{--ez-text-input__input--background-color:var(--ez-combo-box__input--background-color, #FFFFFF);--ez-text-input__input--border-color:var(--ez-combo-box__input--border-color, #DCE0E8)}.list-container{position:relative;width:100%}.options-list{box-sizing:border-box;width:100%;z-index:var(--more-visible, 2);display:flex;flex-direction:column;background-color:var(--ez-combo-box--background-color--xlight);padding:var(--ez-combo-box--space--small);border-radius:var(--ez-combo-box--border-radius);box-shadow:var(--shadow, 0px 0px 16px 0px #000);scroll-behavior:smooth;max-height:calc(4*var(--ez-combo-box__list-height) + 2*var(--ez-combo-box--space--small));overflow:auto}.item{text-align:left;display:flex;justify-content:space-between;align-items:center;border-radius:var(--ez-combo-box--border-radius-small);padding:0 var(--ez-combo-box--space--small);list-style-type:none;min-height:var(--ez-combo-box__list-height)}.item--label{text-align:left;flex-basis:85%;flex-grow:1;color:var(--ez-combo-box__list-text--primary);font-weight:var(--ez-combo-box--font-weight--large);font-family:var(--ez-combo-box--font-family);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.item--value{text-align:right;flex-basis:15%;flex-grow:0;color:var(--ez-combo-box__list-text--primary);font-weight:var(--ez-combo-box--font-weight--large);font-family:var(--ez-combo-box--font-family);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}li:hover{background-color:var(--ez-combo-box--background-medium)}.preselected{background-color:var(--background--medium)}.btn-open-options{outline:none;border:none;background-color:unset;cursor:pointer}.btn-open-options:disabled{cursor:unset}.btn-open-options::after{content:'';display:flex;background-color:var(--ez-combo-box__btn-options--background-color);width:16px;height:16px;-webkit-mask-image:var(--ez-combo-box__drop-down-image);mask-image:var(--ez-combo-box__drop-down-image)}.btn-open-options:disabled:after{background-color:var(--ez-combo-box__btn-options-disabled--background-color)}.btn-open-options:enabled:hover::after{background-color:var(--ez-combo-box__btn-options-hover--background-color)}.btn-open-search{outline:none;border:none;background-color:unset;cursor:pointer}.btn-open-search:disabled{cursor:unset}.btn-open-search::after{content:'';display:flex;background-color:var(--ez-combo-box__btn-search--background-color);width:22px;height:22px;-webkit-mask-image:var(--ez-combo-box__search-image);mask-image:var(--ez-combo-box__search-image)}.btn-open-search:disabled:after{background-color:var(--ez-combo-box__btn-search-disabled--background-color)}.btn-open-search:enabled:hover::after{background-color:var(--ez-combo-box__btn-search-hover--background-color)}";
+class CSSVarsUtils {
+  static applyVarsTextInput(host, child) {
+    if (child) {
+      CSSVarsUtils.applyIfExists(host, child, '--ez-text-input__input--background-color');
+      CSSVarsUtils.applyIfExists(host, child, '--ez-text-input__input--border-color');
+    }
+  }
+  static applyIfExists(host, element, varName) {
+    const prop = getComputedStyle(host).getPropertyValue(varName);
+    if (prop) {
+      element.style.setProperty(varName, prop);
+    }
+  }
+}
+
+const ezComboBoxCss = ":host{--ez-combo-box--height:42px;--ez-combo-box--width:100%;--ez-combo-box__icon--width:48px;--ez-combo-box--border-radius:var(--border--radius-medium, 12px);--ez-combo-box--border-radius-small:var(--border--radius-small, 6px);--ez-combo-box--font-size:var(--text--medium, 14px);--ez-combo-box--font-family:var(--font-pattern, Arial);--ez-combo-box--font-weight--large:var(--text-weight--large, 500);--ez-combo-box--font-weight--medium:var(--text-weight--medium, 400);--ez-combo-box--background-color--xlight:var(--background--xlight, #fff);--ez-combo-box--background-medium:var(--background--medium, #f0f3f7);--ez-combo-box__input--background-color:var(--background--medium, #e0e0e0);--ez-combo-box__input--border:var(--border--medium, 2px solid);--ez-combo-box__input--border-color:var(--ez-combo-box__input--background-color);--ez-combo-box__input--focus--border-color:var(--color--primary, #008561);--ez-combo-box__input--disabled--background-color:var(--color--disable-secondary, #F2F5F8);--ez-combo-box__input--disabled--color:var(--text--disable, #AFB6C0);--ez-combo-box__input--error--border-color:#CC2936;--ez-combo-box__btn-search--background-color:var(--text--primary, #626e82);--ez-combo-box__btn-search-disabled--background-color:var(--text--disable, #AFB6C0);--ez-combo-box__btn-search-hover--background-color:var(--color--primary, #4e4e4e);--ez-combo-box__btn-options--background-color:var(--text--primary, #626e82);--ez-combo-box__btn-options-disabled--background-color:var(--text--disable, #AFB6C0);--ez-combo-box__btn-options-hover--background-color:var(--color--primary, #4e4e4e);--ez-combo-box__label--color:var(--title--primary, #919191);--ez-combo-box__list-text--primary:var(--text--primary, #626e82);--ez-combo-box__list-height:calc(var(--ez-combo-box--font-size) + var(--ez-combo-box--space--medium));--ez-combo-box__drop-down-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" version=\"1.1\" height=\"16px\" width=\"16px\"><path d=\"M 1.8585859,3.0707069 7.9999998,9.2121212 14.141414,3.0707069 16,5.0101006 7.9999998,12.929293 0,4.9292932 Z\"/></svg>');--ez-combo-box__search-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" version=\"1.1\" height=\"22px\" width=\"22px\"><path d=\"m 9.4,2.3 c 4.1,0 7.4,3.2 7.4,7.2 0,1.8 -0.7,3.4 -1.8,4.7 l 0.3,0.3 h 0.9 l 5.7,5.6 -1.7,1.7 -5.7,-5.6 V 15.3 L 14.3,15 C 13,16.1 11.3,16.7 9.5,16.7 5.3,16.7 2,13.5 2,9.5 2,5.5 5.3,2.3 9.4,2.3 m 0,2.2 c -2.9,0 -5.1,2.2 -5.1,5 0,2.8 2.3,5 5.1,5 2.8,0 5.1,-2.2 5.1,-5 0,-2.8 -2.2,-5 -5.1,-5 z\"/></svg>');--ez-combo-box--space--medium:var(--space--medium, 12px);--ez-combo-box--space--small:var(--space--small, 6px);display:flex;flex-wrap:wrap;position:relative;width:var(--ez-combo-box--width)}.list-container{position:relative;width:100%}.options-list{box-sizing:border-box;width:100%;z-index:var(--more-visible, 2);display:flex;flex-direction:column;background-color:var(--ez-combo-box--background-color--xlight);padding:var(--ez-combo-box--space--small);border-radius:var(--ez-combo-box--border-radius);box-shadow:var(--shadow, 0px 0px 16px 0px #000);scroll-behavior:smooth;max-height:calc(4*var(--ez-combo-box__list-height) + 2*var(--ez-combo-box--space--small));overflow:auto}.item{text-align:left;display:flex;justify-content:space-between;align-items:center;border-radius:var(--ez-combo-box--border-radius-small);padding:0 var(--ez-combo-box--space--small);list-style-type:none;min-height:var(--ez-combo-box__list-height)}.item--label{text-align:left;flex-basis:85%;flex-grow:1;color:var(--ez-combo-box__list-text--primary);font-weight:var(--ez-combo-box--font-weight--large);font-family:var(--ez-combo-box--font-family);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.item--value{text-align:right;flex-basis:15%;flex-grow:0;color:var(--ez-combo-box__list-text--primary);font-weight:var(--ez-combo-box--font-weight--large);font-family:var(--ez-combo-box--font-family);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}li:hover{background-color:var(--ez-combo-box--background-medium)}.preselected{background-color:var(--background--medium)}.btn-open-options{outline:none;border:none;background-color:unset;cursor:pointer}.btn-open-options:disabled{cursor:unset}.btn-open-options::after{content:'';display:flex;background-color:var(--ez-combo-box__btn-options--background-color);width:16px;height:16px;-webkit-mask-image:var(--ez-combo-box__drop-down-image);mask-image:var(--ez-combo-box__drop-down-image)}.btn-open-options:disabled:after{background-color:var(--ez-combo-box__btn-options-disabled--background-color)}.btn-open-options:enabled:hover::after{background-color:var(--ez-combo-box__btn-options-hover--background-color)}.btn-open-search{outline:none;border:none;background-color:unset;cursor:pointer}.btn-open-search:disabled{cursor:unset}.btn-open-search::after{content:'';display:flex;background-color:var(--ez-combo-box__btn-search--background-color);width:22px;height:22px;-webkit-mask-image:var(--ez-combo-box__search-image);mask-image:var(--ez-combo-box__search-image)}.btn-open-search:disabled:after{background-color:var(--ez-combo-box__btn-search-disabled--background-color)}.btn-open-search:enabled:hover::after{background-color:var(--ez-combo-box__btn-search-hover--background-color)}";
 
 let EzComboBox$1 = class extends HTMLElement$1 {
   constructor() {
@@ -8254,6 +8250,9 @@ let EzComboBox$1 = class extends HTMLElement$1 {
       this._optionsList.remove();
     }
   }
+  componentDidLoad() {
+    CSSVarsUtils.applyVarsTextInput(this.el, this._inputElement);
+  }
   //---------------------------------------------
   // Event handlers
   //---------------------------------------------
@@ -8316,22 +8315,7 @@ let EzComboBox$1 = class extends HTMLElement$1 {
   static get style() { return ezComboBoxCss; }
 };
 
-class CSSVarsUtils {
-  static applyVarsTextInput(host, textInput) {
-    if (textInput) {
-      CSSVarsUtils.applyIfExists(host, textInput, '--text-input__input--background-color');
-      CSSVarsUtils.applyIfExists(host, textInput, '--text-input__input--border-color');
-    }
-  }
-  static applyIfExists(host, textInput, varName) {
-    const prop = getComputedStyle(host).getPropertyValue(varName);
-    if (prop) {
-      textInput.style.setProperty(varName, prop);
-    }
-  }
-}
-
-const ezDateInputCss = ":host{display:block;width:100%;--ez-date-input__input--background-color:var(--background--medium, #e0e0e0);--ez-date-input__input--border-color:var(--ez-date-input__input--background-color);--ez-date-input__calendar-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" version=\"1.1\" height=\"16px\" width=\"15px\"><path d=\"M 3.171875,5.25 C 2.6485088,5.25 2.21875,5.6797588 2.21875,6.203125 2.21875,6.7264912 2.6485088,7.15625 3.171875,7.15625 3.6952412,7.15625 4.125,6.7264912 4.125,6.203125 4.125,5.6797588 3.6952412,5.25 3.171875,5.25 Z m 2.875,0 C 5.5235088,5.25 5.09375,5.6797588 5.09375,6.203125 5.09375,6.7264912 5.5235088,7.15625 6.046875,7.15625 6.5702412,7.15625 7,6.7264912 7,6.203125 7,5.6797588 6.5702412,5.25 6.046875,5.25 Z m 2.875,0 c -0.5233662,0 -0.953125,0.4297588 -0.953125,0.953125 0,0.5233662 0.4297588,0.953125 0.953125,0.953125 0.5233662,0 0.9511719,-0.4297588 0.9511719,-0.953125 C 9.8730469,5.6797588 9.4452412,5.25 8.921875,5.25 Z m 2.873047,0 c -0.523366,0 -0.953125,0.4297588 -0.953125,0.953125 0,0.5233662 0.429759,0.953125 0.953125,0.953125 0.523366,0 0.953125,-0.4297588 0.953125,-0.953125 C 12.748047,5.6797588 12.318288,5.25 11.794922,5.25 Z M 3.171875,8.1230469 c -0.5233662,0 -0.953125,0.4297588 -0.953125,0.953125 0,0.5233662 0.4297588,0.9531251 0.953125,0.9531251 0.5233662,0 0.953125,-0.4297589 0.953125,-0.9531251 0,-0.5233662 -0.4297588,-0.953125 -0.953125,-0.953125 z m 2.875,0 c -0.5233662,0 -0.953125,0.4297588 -0.953125,0.953125 0,0.5233662 0.4297588,0.9531251 0.953125,0.9531251 C 6.5702412,10.029297 7,9.5995381 7,9.0761719 7,8.5528057 6.5702412,8.1230469 6.046875,8.1230469 Z m 2.8554688,0 c -0.5233663,0 -0.953125,0.4297588 -0.953125,0.953125 0,0.5233662 0.4297587,0.9531251 0.953125,0.9531251 0.5233661,0 0.9531249,-0.4297589 0.953125,-0.9531251 0,-0.5233662 -0.4297588,-0.953125 -0.953125,-0.953125 z m 2.9003902,0 c -0.523366,0 -0.953125,0.4297588 -0.953125,0.953125 0,0.5233662 0.429759,0.9531251 0.953125,0.9531251 0.523367,0 0.953125,-0.4297589 0.953125,-0.9531251 0,-0.5233662 -0.429758,-0.953125 -0.953125,-0.953125 z M 3.171875,10.998047 c -0.5233662,0 -0.953125,0.429759 -0.953125,0.953125 0,0.523366 0.4297588,0.953125 0.953125,0.953125 0.5233662,0 0.953125,-0.429759 0.953125,-0.953125 0,-0.523366 -0.4297588,-0.953125 -0.953125,-0.953125 z m 2.875,0 c -0.5233662,0 -0.953125,0.429759 -0.953125,0.953125 0,0.523366 0.4297588,0.953125 0.953125,0.953125 C 6.5702412,12.904297 7,12.474538 7,11.951172 7,11.427806 6.5702412,10.998047 6.046875,10.998047 Z m 2.8554688,0 c -0.5233663,0 -0.953125,0.429759 -0.953125,0.953125 0,0.523366 0.4297587,0.953125 0.953125,0.953125 0.5233661,0 0.9531249,-0.429759 0.953125,-0.953125 0,-0.523366 -0.4297588,-0.953125 -0.953125,-0.953125 z m 2.9003902,0 c -0.523366,0 -0.953125,0.429759 -0.953125,0.953125 0,0.523366 0.429759,0.953125 0.953125,0.953125 0.523367,0 0.953125,-0.429759 0.953125,-0.953125 0,-0.523366 -0.429758,-0.953125 -0.953125,-0.953125 z M 3.5,0 c -0.554,0 -1,0.446 -1,1 v 0.050781 C 1.0853217,1.2909766 0,2.5186658 0,4 v 9 c 0,1.652487 1.3475134,3 3,3 h 9 c 1.652487,0 3,-1.347513 3,-3 V 4 C 15,2.5186658 13.914678,1.2909766 12.5,1.0507812 V 1 c 0,-0.554 -0.446,-1 -1,-1 -0.554,0 -1,0.446 -1,1 h -2 c 0,-0.554 -0.446,-1 -1,-1 -0.554,0 -1,0.446 -1,1 h -2 C 4.5,0.446 4.054,0 3.5,0 Z m 1,2.0996094 h 2 v 0.640625 c 0,0.554 0.446,1 1,1 0.554,0 1,-0.446 1,-1 v -0.640625 h 2 v 0.640625 c 0,0.554 0.446,1 1,1 0.554,0 1,-0.446 1,-1 V 2.1738281 C 13.311725,2.3905225 13.900391,3.11278 13.900391,4 v 9 c 0,1.062113 -0.838278,1.900391 -1.900391,1.900391 H 3 C 1.9378864,14.900391 1.0996094,14.062113 1.0996094,13 V 4 C 1.0996094,3.11278 1.6882747,2.3905225 2.5,2.1738281 v 0.5664063 c 0,0.554 0.446,1 1,1 0.554,0 1,-0.446 1,-1 z\"/></svg>')}.text-input{--ez-text-input__input--background-color:inherit;--ez-text-input__input--border-color:inherit}.btn-open-cal{outline:none;border:none;background-color:unset;cursor:pointer}.btn-open-cal:disabled{cursor:unset}.btn-open-cal::after{content:'';display:flex;background-color:var(--text--primary, #008561);width:15px;height:16px;-webkit-mask-image:var(--ez-date-input__calendar-image);mask-image:var(--ez-date-input__calendar-image)}.btn-open-cal:disabled:after{background-color:var(--text--disable, #AFB6C0)}.btn-open-cal:enabled:hover::after{background-color:var(--color--primary, #4e4e4e)}ez-text-input{--text-input__input--background-color:var(--ez-date-input__input--background-color, #FFFFFF);--text-input__input--border-color:var(--ez-date-input__input--border-color, #DCE0E8)}";
+const ezDateInputCss = ":host{display:block;width:100%;--ez-date-input__input--background-color:var(--background--medium, #e0e0e0);--ez-date-input__input--border-color:var(--ez-date-input__input--background-color);--ez-date-input__calendar-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" version=\"1.1\" height=\"16px\" width=\"15px\"><path d=\"M 3.171875,5.25 C 2.6485088,5.25 2.21875,5.6797588 2.21875,6.203125 2.21875,6.7264912 2.6485088,7.15625 3.171875,7.15625 3.6952412,7.15625 4.125,6.7264912 4.125,6.203125 4.125,5.6797588 3.6952412,5.25 3.171875,5.25 Z m 2.875,0 C 5.5235088,5.25 5.09375,5.6797588 5.09375,6.203125 5.09375,6.7264912 5.5235088,7.15625 6.046875,7.15625 6.5702412,7.15625 7,6.7264912 7,6.203125 7,5.6797588 6.5702412,5.25 6.046875,5.25 Z m 2.875,0 c -0.5233662,0 -0.953125,0.4297588 -0.953125,0.953125 0,0.5233662 0.4297588,0.953125 0.953125,0.953125 0.5233662,0 0.9511719,-0.4297588 0.9511719,-0.953125 C 9.8730469,5.6797588 9.4452412,5.25 8.921875,5.25 Z m 2.873047,0 c -0.523366,0 -0.953125,0.4297588 -0.953125,0.953125 0,0.5233662 0.429759,0.953125 0.953125,0.953125 0.523366,0 0.953125,-0.4297588 0.953125,-0.953125 C 12.748047,5.6797588 12.318288,5.25 11.794922,5.25 Z M 3.171875,8.1230469 c -0.5233662,0 -0.953125,0.4297588 -0.953125,0.953125 0,0.5233662 0.4297588,0.9531251 0.953125,0.9531251 0.5233662,0 0.953125,-0.4297589 0.953125,-0.9531251 0,-0.5233662 -0.4297588,-0.953125 -0.953125,-0.953125 z m 2.875,0 c -0.5233662,0 -0.953125,0.4297588 -0.953125,0.953125 0,0.5233662 0.4297588,0.9531251 0.953125,0.9531251 C 6.5702412,10.029297 7,9.5995381 7,9.0761719 7,8.5528057 6.5702412,8.1230469 6.046875,8.1230469 Z m 2.8554688,0 c -0.5233663,0 -0.953125,0.4297588 -0.953125,0.953125 0,0.5233662 0.4297587,0.9531251 0.953125,0.9531251 0.5233661,0 0.9531249,-0.4297589 0.953125,-0.9531251 0,-0.5233662 -0.4297588,-0.953125 -0.953125,-0.953125 z m 2.9003902,0 c -0.523366,0 -0.953125,0.4297588 -0.953125,0.953125 0,0.5233662 0.429759,0.9531251 0.953125,0.9531251 0.523367,0 0.953125,-0.4297589 0.953125,-0.9531251 0,-0.5233662 -0.429758,-0.953125 -0.953125,-0.953125 z M 3.171875,10.998047 c -0.5233662,0 -0.953125,0.429759 -0.953125,0.953125 0,0.523366 0.4297588,0.953125 0.953125,0.953125 0.5233662,0 0.953125,-0.429759 0.953125,-0.953125 0,-0.523366 -0.4297588,-0.953125 -0.953125,-0.953125 z m 2.875,0 c -0.5233662,0 -0.953125,0.429759 -0.953125,0.953125 0,0.523366 0.4297588,0.953125 0.953125,0.953125 C 6.5702412,12.904297 7,12.474538 7,11.951172 7,11.427806 6.5702412,10.998047 6.046875,10.998047 Z m 2.8554688,0 c -0.5233663,0 -0.953125,0.429759 -0.953125,0.953125 0,0.523366 0.4297587,0.953125 0.953125,0.953125 0.5233661,0 0.9531249,-0.429759 0.953125,-0.953125 0,-0.523366 -0.4297588,-0.953125 -0.953125,-0.953125 z m 2.9003902,0 c -0.523366,0 -0.953125,0.429759 -0.953125,0.953125 0,0.523366 0.429759,0.953125 0.953125,0.953125 0.523367,0 0.953125,-0.429759 0.953125,-0.953125 0,-0.523366 -0.429758,-0.953125 -0.953125,-0.953125 z M 3.5,0 c -0.554,0 -1,0.446 -1,1 v 0.050781 C 1.0853217,1.2909766 0,2.5186658 0,4 v 9 c 0,1.652487 1.3475134,3 3,3 h 9 c 1.652487,0 3,-1.347513 3,-3 V 4 C 15,2.5186658 13.914678,1.2909766 12.5,1.0507812 V 1 c 0,-0.554 -0.446,-1 -1,-1 -0.554,0 -1,0.446 -1,1 h -2 c 0,-0.554 -0.446,-1 -1,-1 -0.554,0 -1,0.446 -1,1 h -2 C 4.5,0.446 4.054,0 3.5,0 Z m 1,2.0996094 h 2 v 0.640625 c 0,0.554 0.446,1 1,1 0.554,0 1,-0.446 1,-1 v -0.640625 h 2 v 0.640625 c 0,0.554 0.446,1 1,1 0.554,0 1,-0.446 1,-1 V 2.1738281 C 13.311725,2.3905225 13.900391,3.11278 13.900391,4 v 9 c 0,1.062113 -0.838278,1.900391 -1.900391,1.900391 H 3 C 1.9378864,14.900391 1.0996094,14.062113 1.0996094,13 V 4 C 1.0996094,3.11278 1.6882747,2.3905225 2.5,2.1738281 v 0.5664063 c 0,0.554 0.446,1 1,1 0.554,0 1,-0.446 1,-1 z\"/></svg>')}.btn-open-cal{outline:none;border:none;background-color:unset;cursor:pointer}.btn-open-cal:disabled{cursor:unset}.btn-open-cal::after{content:'';display:flex;background-color:var(--text--primary, #008561);width:15px;height:16px;-webkit-mask-image:var(--ez-date-input__calendar-image);mask-image:var(--ez-date-input__calendar-image)}.btn-open-cal:disabled:after{background-color:var(--text--disable, #AFB6C0)}.btn-open-cal:enabled:hover::after{background-color:var(--color--primary, #4e4e4e)}ez-text-input{--text-input__input--background-color:var(--ez-date-input__input--background-color, #FFFFFF);--text-input__input--border-color:var(--ez-date-input__input--border-color, #DCE0E8)}";
 
 let EzDateInput$1 = class extends HTMLElement$1 {
   constructor() {
@@ -8358,7 +8342,7 @@ let EzDateInput$1 = class extends HTMLElement$1 {
   changeValue(newValue) {
     newValue = newValue == null ? null : DateUtils.clearTime(newValue);
     this._textInput.errorMessage = "";
-    if (this.getTextValue(newValue) !== this.getTextValue(this.value)) {
+    if (newValue !== this.value) {
       this.value = newValue;
       this.ezChange.emit();
     }
@@ -8412,7 +8396,7 @@ let EzDateInput$1 = class extends HTMLElement$1 {
   static get style() { return ezDateInputCss; }
 };
 
-const ezDateTimeInputCss = ":host{display:block;width:100%;--ez-date-input__input--background-color:var(--background--medium, #e0e0e0);--ez-date-input__input--border-color:var(--ez-date-input__input--background-color);--ez-date-input__calendar-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" version=\"1.1\" height=\"16px\" width=\"15px\"><path d=\"M 3.171875,5.25 C 2.6485088,5.25 2.21875,5.6797588 2.21875,6.203125 2.21875,6.7264912 2.6485088,7.15625 3.171875,7.15625 3.6952412,7.15625 4.125,6.7264912 4.125,6.203125 4.125,5.6797588 3.6952412,5.25 3.171875,5.25 Z m 2.875,0 C 5.5235088,5.25 5.09375,5.6797588 5.09375,6.203125 5.09375,6.7264912 5.5235088,7.15625 6.046875,7.15625 6.5702412,7.15625 7,6.7264912 7,6.203125 7,5.6797588 6.5702412,5.25 6.046875,5.25 Z m 2.875,0 c -0.5233662,0 -0.953125,0.4297588 -0.953125,0.953125 0,0.5233662 0.4297588,0.953125 0.953125,0.953125 0.5233662,0 0.9511719,-0.4297588 0.9511719,-0.953125 C 9.8730469,5.6797588 9.4452412,5.25 8.921875,5.25 Z m 2.873047,0 c -0.523366,0 -0.953125,0.4297588 -0.953125,0.953125 0,0.5233662 0.429759,0.953125 0.953125,0.953125 0.523366,0 0.953125,-0.4297588 0.953125,-0.953125 C 12.748047,5.6797588 12.318288,5.25 11.794922,5.25 Z M 3.171875,8.1230469 c -0.5233662,0 -0.953125,0.4297588 -0.953125,0.953125 0,0.5233662 0.4297588,0.9531251 0.953125,0.9531251 0.5233662,0 0.953125,-0.4297589 0.953125,-0.9531251 0,-0.5233662 -0.4297588,-0.953125 -0.953125,-0.953125 z m 2.875,0 c -0.5233662,0 -0.953125,0.4297588 -0.953125,0.953125 0,0.5233662 0.4297588,0.9531251 0.953125,0.9531251 C 6.5702412,10.029297 7,9.5995381 7,9.0761719 7,8.5528057 6.5702412,8.1230469 6.046875,8.1230469 Z m 2.8554688,0 c -0.5233663,0 -0.953125,0.4297588 -0.953125,0.953125 0,0.5233662 0.4297587,0.9531251 0.953125,0.9531251 0.5233661,0 0.9531249,-0.4297589 0.953125,-0.9531251 0,-0.5233662 -0.4297588,-0.953125 -0.953125,-0.953125 z m 2.9003902,0 c -0.523366,0 -0.953125,0.4297588 -0.953125,0.953125 0,0.5233662 0.429759,0.9531251 0.953125,0.9531251 0.523367,0 0.953125,-0.4297589 0.953125,-0.9531251 0,-0.5233662 -0.429758,-0.953125 -0.953125,-0.953125 z M 3.171875,10.998047 c -0.5233662,0 -0.953125,0.429759 -0.953125,0.953125 0,0.523366 0.4297588,0.953125 0.953125,0.953125 0.5233662,0 0.953125,-0.429759 0.953125,-0.953125 0,-0.523366 -0.4297588,-0.953125 -0.953125,-0.953125 z m 2.875,0 c -0.5233662,0 -0.953125,0.429759 -0.953125,0.953125 0,0.523366 0.4297588,0.953125 0.953125,0.953125 C 6.5702412,12.904297 7,12.474538 7,11.951172 7,11.427806 6.5702412,10.998047 6.046875,10.998047 Z m 2.8554688,0 c -0.5233663,0 -0.953125,0.429759 -0.953125,0.953125 0,0.523366 0.4297587,0.953125 0.953125,0.953125 0.5233661,0 0.9531249,-0.429759 0.953125,-0.953125 0,-0.523366 -0.4297588,-0.953125 -0.953125,-0.953125 z m 2.9003902,0 c -0.523366,0 -0.953125,0.429759 -0.953125,0.953125 0,0.523366 0.429759,0.953125 0.953125,0.953125 0.523367,0 0.953125,-0.429759 0.953125,-0.953125 0,-0.523366 -0.429758,-0.953125 -0.953125,-0.953125 z M 3.5,0 c -0.554,0 -1,0.446 -1,1 v 0.050781 C 1.0853217,1.2909766 0,2.5186658 0,4 v 9 c 0,1.652487 1.3475134,3 3,3 h 9 c 1.652487,0 3,-1.347513 3,-3 V 4 C 15,2.5186658 13.914678,1.2909766 12.5,1.0507812 V 1 c 0,-0.554 -0.446,-1 -1,-1 -0.554,0 -1,0.446 -1,1 h -2 c 0,-0.554 -0.446,-1 -1,-1 -0.554,0 -1,0.446 -1,1 h -2 C 4.5,0.446 4.054,0 3.5,0 Z m 1,2.0996094 h 2 v 0.640625 c 0,0.554 0.446,1 1,1 0.554,0 1,-0.446 1,-1 v -0.640625 h 2 v 0.640625 c 0,0.554 0.446,1 1,1 0.554,0 1,-0.446 1,-1 V 2.1738281 C 13.311725,2.3905225 13.900391,3.11278 13.900391,4 v 9 c 0,1.062113 -0.838278,1.900391 -1.900391,1.900391 H 3 C 1.9378864,14.900391 1.0996094,14.062113 1.0996094,13 V 4 C 1.0996094,3.11278 1.6882747,2.3905225 2.5,2.1738281 v 0.5664063 c 0,0.554 0.446,1 1,1 0.554,0 1,-0.446 1,-1 z\"/></svg>')}.text-input{--ez-text-input__input--background-color:inherit;--ez-text-input__input--border-color:inherit}.btn-open-cal{outline:none;border:none;background-color:unset;cursor:pointer}.btn-open-cal:disabled{cursor:unset}.btn-open-cal::after{content:'';display:flex;background-color:var(--text--primary, #008561);width:15px;height:16px;-webkit-mask-image:var(--ez-date-input__calendar-image);mask-image:var(--ez-date-input__calendar-image)}.btn-open-cal:disabled:after{background-color:var(--text--disable, #AFB6C0)}.btn-open-cal:enabled:hover::after{background-color:var(--color--primary, #4e4e4e)}ez-text-input{--text-input__input--background-color:var(--ez-date-input__input--background-color, #FFFFFF);--text-input__input--border-color:var(--ez-date-input__input--border-color, #DCE0E8)}";
+const ezDateTimeInputCss = ":host{display:block;width:100%;--ez-date-input__input--background-color:var(--background--medium, #e0e0e0);--ez-date-input__input--border-color:var(--ez-date-input__input--background-color);--ez-date-input__calendar-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" version=\"1.1\" height=\"16px\" width=\"15px\"><path d=\"M 3.171875,5.25 C 2.6485088,5.25 2.21875,5.6797588 2.21875,6.203125 2.21875,6.7264912 2.6485088,7.15625 3.171875,7.15625 3.6952412,7.15625 4.125,6.7264912 4.125,6.203125 4.125,5.6797588 3.6952412,5.25 3.171875,5.25 Z m 2.875,0 C 5.5235088,5.25 5.09375,5.6797588 5.09375,6.203125 5.09375,6.7264912 5.5235088,7.15625 6.046875,7.15625 6.5702412,7.15625 7,6.7264912 7,6.203125 7,5.6797588 6.5702412,5.25 6.046875,5.25 Z m 2.875,0 c -0.5233662,0 -0.953125,0.4297588 -0.953125,0.953125 0,0.5233662 0.4297588,0.953125 0.953125,0.953125 0.5233662,0 0.9511719,-0.4297588 0.9511719,-0.953125 C 9.8730469,5.6797588 9.4452412,5.25 8.921875,5.25 Z m 2.873047,0 c -0.523366,0 -0.953125,0.4297588 -0.953125,0.953125 0,0.5233662 0.429759,0.953125 0.953125,0.953125 0.523366,0 0.953125,-0.4297588 0.953125,-0.953125 C 12.748047,5.6797588 12.318288,5.25 11.794922,5.25 Z M 3.171875,8.1230469 c -0.5233662,0 -0.953125,0.4297588 -0.953125,0.953125 0,0.5233662 0.4297588,0.9531251 0.953125,0.9531251 0.5233662,0 0.953125,-0.4297589 0.953125,-0.9531251 0,-0.5233662 -0.4297588,-0.953125 -0.953125,-0.953125 z m 2.875,0 c -0.5233662,0 -0.953125,0.4297588 -0.953125,0.953125 0,0.5233662 0.4297588,0.9531251 0.953125,0.9531251 C 6.5702412,10.029297 7,9.5995381 7,9.0761719 7,8.5528057 6.5702412,8.1230469 6.046875,8.1230469 Z m 2.8554688,0 c -0.5233663,0 -0.953125,0.4297588 -0.953125,0.953125 0,0.5233662 0.4297587,0.9531251 0.953125,0.9531251 0.5233661,0 0.9531249,-0.4297589 0.953125,-0.9531251 0,-0.5233662 -0.4297588,-0.953125 -0.953125,-0.953125 z m 2.9003902,0 c -0.523366,0 -0.953125,0.4297588 -0.953125,0.953125 0,0.5233662 0.429759,0.9531251 0.953125,0.9531251 0.523367,0 0.953125,-0.4297589 0.953125,-0.9531251 0,-0.5233662 -0.429758,-0.953125 -0.953125,-0.953125 z M 3.171875,10.998047 c -0.5233662,0 -0.953125,0.429759 -0.953125,0.953125 0,0.523366 0.4297588,0.953125 0.953125,0.953125 0.5233662,0 0.953125,-0.429759 0.953125,-0.953125 0,-0.523366 -0.4297588,-0.953125 -0.953125,-0.953125 z m 2.875,0 c -0.5233662,0 -0.953125,0.429759 -0.953125,0.953125 0,0.523366 0.4297588,0.953125 0.953125,0.953125 C 6.5702412,12.904297 7,12.474538 7,11.951172 7,11.427806 6.5702412,10.998047 6.046875,10.998047 Z m 2.8554688,0 c -0.5233663,0 -0.953125,0.429759 -0.953125,0.953125 0,0.523366 0.4297587,0.953125 0.953125,0.953125 0.5233661,0 0.9531249,-0.429759 0.953125,-0.953125 0,-0.523366 -0.4297588,-0.953125 -0.953125,-0.953125 z m 2.9003902,0 c -0.523366,0 -0.953125,0.429759 -0.953125,0.953125 0,0.523366 0.429759,0.953125 0.953125,0.953125 0.523367,0 0.953125,-0.429759 0.953125,-0.953125 0,-0.523366 -0.429758,-0.953125 -0.953125,-0.953125 z M 3.5,0 c -0.554,0 -1,0.446 -1,1 v 0.050781 C 1.0853217,1.2909766 0,2.5186658 0,4 v 9 c 0,1.652487 1.3475134,3 3,3 h 9 c 1.652487,0 3,-1.347513 3,-3 V 4 C 15,2.5186658 13.914678,1.2909766 12.5,1.0507812 V 1 c 0,-0.554 -0.446,-1 -1,-1 -0.554,0 -1,0.446 -1,1 h -2 c 0,-0.554 -0.446,-1 -1,-1 -0.554,0 -1,0.446 -1,1 h -2 C 4.5,0.446 4.054,0 3.5,0 Z m 1,2.0996094 h 2 v 0.640625 c 0,0.554 0.446,1 1,1 0.554,0 1,-0.446 1,-1 v -0.640625 h 2 v 0.640625 c 0,0.554 0.446,1 1,1 0.554,0 1,-0.446 1,-1 V 2.1738281 C 13.311725,2.3905225 13.900391,3.11278 13.900391,4 v 9 c 0,1.062113 -0.838278,1.900391 -1.900391,1.900391 H 3 C 1.9378864,14.900391 1.0996094,14.062113 1.0996094,13 V 4 C 1.0996094,3.11278 1.6882747,2.3905225 2.5,2.1738281 v 0.5664063 c 0,0.554 0.446,1 1,1 0.554,0 1,-0.446 1,-1 z\"/></svg>')}.btn-open-cal{outline:none;border:none;background-color:unset;cursor:pointer}.btn-open-cal:disabled{cursor:unset}.btn-open-cal::after{content:'';display:flex;background-color:var(--text--primary, #008561);width:15px;height:16px;-webkit-mask-image:var(--ez-date-input__calendar-image);mask-image:var(--ez-date-input__calendar-image)}.btn-open-cal:disabled:after{background-color:var(--text--disable, #AFB6C0)}.btn-open-cal:enabled:hover::after{background-color:var(--color--primary, #4e4e4e)}ez-text-input{--text-input__input--background-color:var(--ez-date-input__input--background-color, #FFFFFF);--text-input__input--border-color:var(--ez-date-input__input--border-color, #DCE0E8)}";
 
 let EzDateTimeInput$1 = class extends HTMLElement$1 {
   constructor() {
@@ -8447,29 +8431,18 @@ let EzDateTimeInput$1 = class extends HTMLElement$1 {
     }
     else if (ev.shiftKey && ev.key === "Tab") {
       if (input.selectionStart > 0) {
-        let selectIni = input.value.lastIndexOf(":", input.selectionStart);
-        selectIni = selectIni === -1 ? input.value.lastIndexOf(" ", input.selectionStart) : selectIni;
-        selectIni = selectIni === -1 ? input.value.lastIndexOf("/", input.selectionStart) : selectIni;
-        selectIni = selectIni === -1 ? input.selectionStart : selectIni;
-        let selectFin = input.value.lastIndexOf(":", selectIni - 1);
-        selectFin = selectFin === -1 ? input.value.lastIndexOf(" ", selectIni - 1) : selectFin;
-        selectFin = selectFin === -1 ? input.value.lastIndexOf("/", selectIni - 1) : selectFin;
-        selectFin = selectFin === -1 ? 0 : selectFin + 1;
-        input.setSelectionRange(selectFin, selectIni);
-        ev.preventDefault();
+        let selectIni = input.value.lastIndexOf(" ", input.selectionStart);
+        if (selectIni !== -1) {
+          input.setSelectionRange(0, selectIni);
+          ev.preventDefault();
+        }
       }
     }
     else if (ev.key === "Tab") {
       if (input.value.length !== input.selectionEnd) {
-        let selectIni = input.value.indexOf("/", input.selectionEnd);
-        selectIni = selectIni === -1 ? input.value.indexOf(" ", input.selectionEnd) : selectIni;
-        selectIni = selectIni === -1 ? input.value.indexOf(":", input.selectionEnd) : selectIni;
+        let selectIni = input.value.indexOf(" ", input.selectionEnd);
         selectIni = selectIni === -1 ? input.selectionEnd : selectIni + 1;
-        let selectFin = input.value.indexOf("/", selectIni);
-        selectFin = selectFin === -1 ? input.value.indexOf(" ", selectIni) : selectFin;
-        selectFin = selectFin === -1 ? input.value.indexOf(":", selectIni) : selectFin;
-        selectFin = selectFin === -1 ? input.value.length : selectFin;
-        input.setSelectionRange(selectIni, selectFin);
+        input.setSelectionRange(selectIni, input.value.length);
         ev.preventDefault();
       }
     }
@@ -8477,27 +8450,22 @@ let EzDateTimeInput$1 = class extends HTMLElement$1 {
   onFocused() {
     const input = this._textInput.shadowRoot.querySelector('input');
     if (input.selectionStart !== input.selectionEnd) {
-      let selectFin = input.value.indexOf("/");
-      selectFin = selectFin === -1 ? input.value.indexOf(" ") : selectFin;
-      selectFin = selectFin === -1 ? input.value.indexOf(":") : selectFin;
-      selectFin = selectFin === -1 ? input.value.length : selectFin;
-      input.setSelectionRange(0, selectFin);
+      let selectIni = input.value.indexOf(" ", input.selectionStart);
+      selectIni = selectIni === -1 ? input.value.length : selectIni;
+      input.setSelectionRange(0, selectIni);
     }
   }
   onClicked() {
     const input = this._textInput.shadowRoot.querySelector('input');
-    let selectIni = input.value.indexOf("/", input.selectionEnd);
-    selectIni = selectIni === -1 ? input.value.indexOf(" ", input.selectionEnd) : selectIni;
-    selectIni = selectIni === -1 ? input.value.indexOf(":", input.selectionEnd) : selectIni;
-    let selectFin = input.value.lastIndexOf(":", input.selectionEnd);
-    selectFin = selectFin === -1 ? input.value.lastIndexOf(" ", selectIni - 1) : selectFin;
-    selectFin = selectFin === -1 ? input.value.lastIndexOf("/", selectIni - 1) : selectFin;
-    selectFin = selectFin === -1 ? 0 : selectFin + 1;
-    input.setSelectionRange(selectFin, selectIni);
+    let selectIni = input.value.lastIndexOf(" ", input.selectionEnd);
+    selectIni = selectIni === -1 ? 0 : selectIni + 1;
+    selectIni = selectIni > input.selectionEnd ? 0 : selectIni;
+    let selectFin = selectIni === 0 ? input.value.indexOf(" ") : input.value.length;
+    input.setSelectionRange(selectIni, selectFin);
   }
   changeValue(newValue) {
     this._textInput.errorMessage = "";
-    if (this.getTextValue(newValue) !== this.getTextValue(this.value)) {
+    if (newValue !== this.value) {
       this.value = newValue;
       this.ezChange.emit();
     }
@@ -8509,7 +8477,12 @@ let EzDateTimeInput$1 = class extends HTMLElement$1 {
   }
   parseDate() {
     const strValue = this._textInput.value;
-    const parsedDate = DateUtils.strToDate(strValue);
+    const partsDateTime = (strValue && strValue.length > 0) ? strValue.split(" ") : [];
+    const onlyDate = partsDateTime.length > 0 ? partsDateTime[0] : strValue;
+    const onlyTime = partsDateTime[1] ? partsDateTime[1] : "";
+    const parsedTime = TimeFormatter.prepareValue(onlyTime, this.showSeconds);
+    const strDateTime = onlyDate + (parsedTime && " " + parsedTime);
+    const parsedDate = DateUtils.strToDate(strDateTime);
     if (parsedDate || !strValue) {
       if (this.value === parsedDate) {
         this.changeValue(this.value);
@@ -8632,58 +8605,206 @@ 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 })));
+};
 
-  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.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);
   }
+};
 
-  return target;
+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
@@ -9008,1145 +9129,88 @@ 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];
+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 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];
-  }
-
-  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) {
+/////////////////////////////// ACTION CREATORS ///////////////////////////////
+function loadMetadata(formMetadata) {
   return {
-    type: "FORM/CHANGEFIELD",
-    payload: { dataUnit, recordId, fieldName, value }
+    type: FormActions.METADATA_LOADED,
+    payload: formMetadata
   };
 }
-function changeTab$1(formId, index) {
+function changeTab(currentSheet) {
   return {
-    type: "FORM/CHANGETAB",
-    payload: { formId, index }
+    type: FormActions.CHANGE_TAB,
+    payload: currentSheet
   };
 }
-function clearEdition$1(dataUnit, recordsLimit) {
-  return {
-    type: "FORM/CLEAREDITION",
-    payload: {
-      dataUnit,
-      recordsLimit
-    }
-  };
+///////////////////////////////    SELECTORS    ///////////////////////////////
+function selectFormMetadata(state) {
+  return state.formMetadata;
 }
-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) {
-  return {
-    type: "FORM/INVALIDFIELD",
-    payload: {
-      tabController,
-      tabIndex,
-      dataUnit,
-      recordId,
-      recordIndex,
-      fieldName,
-      errorMessage
-    }
-  };
-}
-function showHideNavigationButtons(buttonName, status) {
-  return {
-    type: "FORM/SHOWHIDENAVBTN",
-    payload: {
-      buttonName,
-      status
-    }
-  };
+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 = {}));
 
-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;
-  });
-}
-
-function groupByActionTypes(rawActions) {
-  var actions = parseActions(rawActions);
-  return function (action) {
-    return actions.indexOf(action.type) >= 0 ? action.type : null;
-  };
-}
-
-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._dataUnit = dataUnit;
+    this._fields = new Map();
   }
-}
-/* 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']));
-  }
-}
-/* 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;
+    this._fields.set(fieldName, Bind.create(fieldName, field, (fieldName, newValue) => this.setFieldValue(fieldName, newValue)));
   }
-
-  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];
+  setFieldValue(fieldName, newValue) {
+    if (this._dataUnit.records.length === 0) {
+      this._dataUnit.addRecord();
     }
-
-    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;
-    }
-  };
-}
-});
-
-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 {
@@ -10181,775 +9245,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);
+    const isValid = invalidFields.length === 0;
+    if (!isValid) {
+      ApplicationUtils.info("Há pelo menos um campo obrigatório não preenchido.");
     }
-    return result.isValid;
+    return 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);
-    }
-  }
-  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);
-        }
-      }
+  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));
     }
   }
-  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());
-    }
-  }
-  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; }
 };
 
@@ -121949,7 +120342,7 @@ let EzModal$1 = class extends HTMLElement$1 {
   static get style() { return ezModalCss; }
 };
 
-const ezNumberInputCss = ":host{display:block;width:100%;--ez-number-input__input--background-color:var(--background--medium, #e0e0e0);--ez-number-input__input--border-color:var(--ez-number-input__input--background-color)}.text-input{--ez-number-input__input--background-color:inherit;--ez-number-input__input--border-color:inherit}";
+const ezNumberInputCss = ":host{display:block;width:100%}";
 
 let EzNumberInput$1 = class extends HTMLElement$1 {
   constructor() {
@@ -121961,17 +120354,6 @@ let EzNumberInput$1 = class extends HTMLElement$1 {
      * Deixa o campo disponível ou não para uso.
      */
     this.enabled = true;
-    /**
-     * Configura o alinhamento do texto.
-     */
-    this.textleft = false;
-    /**
-     * Opção de configurar a transformação de string to number entre formatação pt-BR e en-US
-     * (formatação de ENTRADA e SAÍDA do componente: pt-BR="###.###,##" en-US="###,###.##"; Default: "pt-BR")
-     * Qualquer outro valor que não seja "en-US", adotará a formatação "pt-BR"
-     * Não é case sensitive
-     */
-    this.formatNumber = "PT-BR";
   }
   setLabel() {
     this._textInput.label = this.label;
@@ -121984,22 +120366,11 @@ let EzNumberInput$1 = class extends HTMLElement$1 {
       this._textInput.value = this.getTextValue(this.value);
     }
   }
-  onPrecisionChanged(newPrecision) {
-    if (isNaN(newPrecision)) {
-      this.precision = 0;
-    }
-  }
-  onPrettyPrecisionChanged(newPrettyPrecision) {
-    if (isNaN(newPrettyPrecision)) {
-      this.prettyPrecision = 0;
-    }
-  }
   changeValue(newValue) {
     this.errorMessage = "";
     if (newValue && newValue !== this.value) {
       this.value = newValue;
-      this._textInput.value = this.getTextValue(newValue);
-      this.ezChange.emit();
+      this.ezChange.emit(this.value);
     }
   }
   parseNumber() {
@@ -122018,48 +120389,22 @@ let EzNumberInput$1 = class extends HTMLElement$1 {
     }
   }
   getTextValue(value) {
-    const parsedNumber = value ? NumberUtils.stringToNumber(value) : null;
-    if (parsedNumber != null && isNaN(parsedNumber)) {
-      this.errorMessage = "O valor digitado não é um número válido";
-    }
-    else {
-      return this.formatNumber.toUpperCase() !== "EN-US" ? NumberUtils.format(value.toString(), this.precision, this.prettyPrecision) : NumberUtils.changeFormat(NumberUtils.format(value.toString(), this.precision, this.prettyPrecision));
+    if (value) {
+      return this.precision > 0 ? NumberUtils.format(value.toString(), Number(this.precision), Number(this.prettyPrecision)) : value.toString();
     }
-    return "";
+    return null;
   }
   componentDidLoad() {
-    if (!this.textleft) {
-      this._textInput.shadowRoot.querySelector('input').classList.add('text--right');
-    }
-    let rightItem;
-    let letfItem;
-    for (const key in this._hostElement.children) {
-      if (Object.prototype.hasOwnProperty.call(this._hostElement.children, key)) {
-        const element = this._hostElement.children[key];
-        if (element.getAttribute('slot') === 'rightIcon') {
-          rightItem = element;
-        }
-        else if (element.getAttribute('slot') === 'leftIcon') {
-          letfItem = element;
-        }
-      }
-    }
-    this._leftSlotItem = letfItem;
-    this._rightSlotItem = rightItem;
-  }
-  componentWillLoad() {
-    this.onPrecisionChanged(this.precision);
-    this.onPrettyPrecisionChanged(this.prettyPrecision);
+    CSSVarsUtils.applyVarsTextInput(this._elem, this._textInput);
   }
   render() {
-    return (h(Host, { ref: elem => this._hostElement = elem }, h("ez-text-input", { class: "text-input", ref: elem => this._textInput = elem, onBlur: () => this.parseNumber(), label: this.label, onEzChange: event => event.stopPropagation(), value: this.getTextValue(this.value), restrict: "0123456789-,.", enabled: this.enabled, errorMessage: this.errorMessage }, this._rightSlotItem ? h("slot", { name: "rightIcon", slot: "rightIcon" }) : undefined, this._leftSlotItem ? h("slot", { name: "leftIcon", slot: "leftIcon" }) : undefined)));
+    return (h("ez-text-input", { ref: elem => this._textInput = elem, onBlur: () => this.parseNumber(), label: this.label, onEzChange: event => event.stopPropagation(), value: this.getTextValue(this.value), restrict: this.precision > 0 ? "0123456789-,." : "0123456789-", enabled: this.enabled, errorMessage: this.errorMessage }));
   }
+  get _elem() { return this; }
   static get watchers() { return {
     "label": ["setLabel"],
     "errorMessage": ["setErrorMessage"],
-    "value": ["applyValueToInput"],
-    "precision": ["onPrecisionChanged"],
-    "prettyPrecision": ["onPrettyPrecisionChanged"]
+    "value": ["applyValueToInput"]
   }; }
   static get style() { return ezNumberInputCss; }
 };
@@ -122253,10 +120598,14 @@ let EzSearch$1 = class extends HTMLElement$1 {
     this.value = evt.detail;
     this.ezChange.emit(evt.detail);
   }
+  componentDidLoad() {
+    CSSVarsUtils.applyVarsTextInput(this._elem, this._comboElement);
+  }
   render() {
     return (h("ez-combo-box", { ref: elem => this._comboElement = elem, value: this.value, label: this.label, enabled: this.enabled, errorMessage: this.errorMessage, optionLoader: this.optionLoader, searchMode: true, onEzChange: evt => this.onComboChange(evt), showSelectedValue: this.showSelectedValue, showOptionValue: this.showOptionValue }));
   }
   ;
+  get _elem() { return this; }
   static get watchers() { return {
     "value": ["updateValue"]
   }; }
@@ -123248,128 +121597,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 {
@@ -123620,20 +121847,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 {
@@ -123669,34 +121882,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: "NOMEPARC",
-          label: "Nome Parceiro",
-          dataType: DataType.TEXT
+          name: "RECDESP",
+          label: "Receita/Despesa",
+          dataType: DataType.TEXT,
+          userInterface: UserInterface.OPTIONSELECTOR,
+          required: true,
+          properties: { options: `{"-1": "Despesa", "1": "Receita"}` }
+        },
+        {
+          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; }
 };
@@ -123711,13 +121967,13 @@ 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]}]);
 const EzList = /*@__PURE__*/proxyCustomElement(EzList$1, [1,"ez-list",{"dataSource":[1040],"useGroups":[1540,"use-groups"],"ezDraggable":[1028,"ez-draggable"],"ezSelectable":[1028,"ez-selectable"],"itemSlotBuilder":[1040],"_listItems":[32],"_listGroupItems":[32]}]);
 const EzModal = /*@__PURE__*/proxyCustomElement(EzModal$1, [1,"ez-modal",{"modalSize":[1,"modal-size"],"align":[1],"opened":[1028],"closeEsc":[4,"close-esc"],"closeOutsideClick":[4,"close-outside-click"]}]);
-const EzNumberInput = /*@__PURE__*/proxyCustomElement(EzNumberInput$1, [1,"ez-number-input",{"label":[513],"value":[1544],"enabled":[516],"errorMessage":[1537,"error-message"],"precision":[1538],"prettyPrecision":[1538,"pretty-precision"],"textleft":[516],"formatNumber":[513,"format-number"],"_leftSlotItem":[32],"_rightSlotItem":[32]}]);
+const EzNumberInput = /*@__PURE__*/proxyCustomElement(EzNumberInput$1, [1,"ez-number-input",{"label":[1],"value":[1538],"enabled":[4],"errorMessage":[1537,"error-message"],"precision":[2],"prettyPrecision":[2,"pretty-precision"]}]);
 const EzPopover = /*@__PURE__*/proxyCustomElement(EzPopover$1, [1,"ez-popover",{"autoClose":[516,"auto-close"],"top":[1537],"left":[1537],"bottom":[1537],"right":[1537],"boxWidth":[513,"box-width"],"opened":[1540]}]);
 const EzPopup = /*@__PURE__*/proxyCustomElement(EzPopup$1, [1,"ez-popup",{"size":[1],"opened":[1540],"useHeader":[1540,"use-header"],"ezTitle":[1,"ez-title"]}]);
 const EzSearch = /*@__PURE__*/proxyCustomElement(EzSearch$1, [1,"ez-search",{"value":[1537],"label":[1537],"enabled":[1540],"errorMessage":[1537,"error-message"],"optionLoader":[16],"showSelectedValue":[4,"show-selected-value"],"showOptionValue":[4,"show-option-value"]}]);
@@ -123727,9 +121983,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) => {
@@ -123761,9 +122015,7 @@ const defineCustomElements = (opts) => {
   EzTimeInput,
   EzToast,
   EzUpload,
-  FormMetadata,
   GridConfig,
-  PlaceHolder,
   SelectBox,
   TestDu
     ].forEach(cmp => {
@@ -123774,4 +122026,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 };