@sankhyalabs/ezui 1.1.6 → 1.1.10

package/dist/cjs/ez-button_14.cjs.entry.js

@@ -4,50 +4,50 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-9403fe8f.js');
 const RequestMetadata = require('./RequestMetadata-2cd01e8a.js');
-const DataUnit = require('./DataUnit-09a6e7be.js');
+const DataUnit = require('./DataUnit-95368a67.js');
 
 const ezButtonCss = ":host{--bt--min-width:100px;--bt--height:42px;--bt__icon--width:18px;--bt__inline__icon--padding:12px;--bt--padding-top:var(--space--medium, 12px);--bt--padding-bottom:var(--space--medium, 12px);--bt--padding-right:var(--space--large, 24px);--bt--padding-left:var(--space--large, 24px);--bt--color:var(--text--inverted, #FFF);--bt--font-size:var(--text--medium, 14px);--bt--font-family:var(--font-pattern, Arial);--bt--font-weight:var(--text-weight--large);--bt--background-color:var(--color--primary, #c0c0c0);--bt--border-radius:var(--border--radius-large, 12px);--bt--border:none;--bt--hover--background-color:var(--color--primary-700, var(--bt--background-color));--bt--disabled--color:var(--color--disable-primary, var(--bt--color));--bt--disabled--background-color:var(--color--disabled, var(--bt--background-color));--bt--focus--border:var(--bt--border);--bt--focus--box-shadow:none}button{display:flex;align-items:center;justify-content:center;margin:0;cursor:pointer;transition:background-color 0.2s linear;min-width:var(--bt--min-width);height:var(--bt--height);font-family:var(--bt--font-family);font-size:var(--bt--font-size);font-weight:var(--bt--font-weight);padding:var(--bt--padding-top) var(--bt--padding-right) var(--bt--padding-bottom) var(--bt--padding-left);border-radius:var(--bt--border-radius);background-color:var(--bt--background-color);color:var(--bt--color);fill:var(--bt--color);border:var(--bt--border)}button:hover{background-color:var(--bt--hover--background-color)}button:focus{outline:none;border:var(--bt--focus--border);box-shadow:var(--bt--focus--box-shadow)}button:disabled{background-color:var(--bt--disabled--background-color);color:var(--bt--disabled--color);fill:var(--bt--disabled--color);border:none;cursor:no-drop}button.icon{width:42px;min-width:42px;height:42px;padding:0px}a{font-family:var(--bt--font-family);font-size:var(--bt--font-size);font-weight:var(--bt--font-weight);cursor:pointer;display:flex;align-items:center;justify-content:center}";
 
-const EzButton = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    /**
-     * 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";
-  }
-  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(--bt__inline__icon--padding)";
-      }
-      else if (slot.name == "rightIcon") {
-        content.style.paddingLeft = "var(--bt__inline__icon--padding)";
-      }
-    }
-  }
-  render() {
-    if (this.mode == "icon") {
-      return (index.h("button", { class: "icon", type: "button", disabled: !this.enabled }, index.h("ez-icon", { class: "icon", href: this.image, size: "large", onClick: evt => {
-          if (!this.enabled)
-            evt.stopPropagation();
-        } })));
-    }
-    else if (this.mode == "link") {
-      return (index.h("a", null, index.h("slot", { name: "leftIcon", onSlotchange: (ev) => { this.handleSlotChange(ev); } }), this.label, index.h("slot", { name: "rightIcon", onSlotchange: (ev) => { this.handleSlotChange(ev); } })));
-    }
-    else {
-      return (index.h("button", { type: "button", disabled: !this.enabled }, index.h("slot", { name: "leftIcon", onSlotchange: (ev) => { this.handleSlotChange(ev); } }), this.label, index.h("slot", { name: "rightIcon", onSlotchange: (ev) => { this.handleSlotChange(ev); } })));
-    }
-  }
-};
+const EzButton = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    /**
+     * 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";
+  }
+  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(--bt__inline__icon--padding)";
+      }
+      else if (slot.name == "rightIcon") {
+        content.style.paddingLeft = "var(--bt__inline__icon--padding)";
+      }
+    }
+  }
+  render() {
+    if (this.mode == "icon") {
+      return (index.h("button", { class: "icon", type: "button", disabled: !this.enabled }, index.h("ez-icon", { class: "icon", href: this.image, size: "large", onClick: evt => {
+          if (!this.enabled)
+            evt.stopPropagation();
+        } })));
+    }
+    else if (this.mode == "link") {
+      return (index.h("a", null, index.h("slot", { name: "leftIcon", onSlotchange: (ev) => { this.handleSlotChange(ev); } }), this.label, index.h("slot", { name: "rightIcon", onSlotchange: (ev) => { this.handleSlotChange(ev); } })));
+    }
+    else {
+      return (index.h("button", { type: "button", disabled: !this.enabled }, index.h("slot", { name: "leftIcon", onSlotchange: (ev) => { this.handleSlotChange(ev); } }), this.label, index.h("slot", { name: "rightIcon", onSlotchange: (ev) => { this.handleSlotChange(ev); } })));
+    }
+  }
+};
 EzButton.style = ezButtonCss;
 
 class FloatingEntry {
@@ -197,439 +197,439 @@ class DateUtils {
 
 const ezCalendarCss = ":host{--cal--font-family:var(--font-pattern, Arial);--cal--color:var(--title--primary, #626e82);--cal--text-shadow:var(--text-shadow, 0 0 0 #353535,0 0 1px transparent);--cal__body--background-color:var(--background--xlight, #FFF);--cal__body--padding:var(--space--medium, 12px);--cal__body--border-radius:var(--border--radius-medium, 12px);--cal__body--shadow:var(--shadow, 0px 0px 16px 0px #000);--cal__header-line--stroke:2px;--cal__header-line--color:var(--color--strokes, #C0C0C0);--cal__nav-btn--fill:var(--text--primary, #008561);--cal__nav-btn--over--fill:var(--color--primary, #350404);--cal__nav-btn--width:10px;--cal__nav-btn--height:16px;--cal__nav-btn--previous-path:path(\"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\");--cal__nav-btn--next-path:path(\"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\");--cal__cell--margin:0px var(--space--small, 12px);--cal__cell--width:var(--space--large, 24px);--cal__cell--padding:var(--space--extra-small, 3px) 0px;--cal__cell--border-radius:var(--border--radius-small, 6px);--cal__cell--over--background-color:var(--color--strokes, #C0C0C0);--cal__cell--outset--color:var(--color--strokes, #C0C0C0);--cal__cell--selected--background-color:var(--color--primary, #008561);--cal__cell--selected--color:var(--color--inverted, #FFF);--cal__btn-today--color:var(--color--primary);--cal__btn-today--hover--background-color:var(--color--strokes, #C0C0C0);--cal__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(--cal__body--background-color);padding:var(--cal__body--padding);border-radius:var(--cal__body--border-radius);box-shadow:var(--cal__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(--cal--font-family);color:var(--cal--color);text-shadow:var(--cal--text-shadow);border-bottom:solid var(--cal__header-line--stroke) var(--cal__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(--cal__nav-btn--fill);width:var(--cal__nav-btn--width);height:var(--cal__nav-btn--height)}.calendar__btn-previous::after{clip-path:var(--cal__nav-btn--previous-path)}.calendar__btn-next::after{clip-path:var(--cal__nav-btn--next-path)}.calendar__btn-next:hover::after,.calendar__btn-previous:hover::after{background-color:var(--cal__nav-btn--over--fill)}.calendar__lbl-month{font-weight:var(--text-weight--large, 600);font-size:var(--title--medium, 16px);font-family:var(--cal--font-family);color:var(--cal--color);text-shadow:var(--cal--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(--cal--font-family);color:var(--cal--color);text-shadow:var(--cal--text-shadow);padding:var(--cal__cell--padding);margin:var(--cal__cell--margin);min-width:var(--cal__cell--width);border-radius:var(--cal__cell--border-radius)}.calendar__cell:hover{background-color:var(--cal__cell--over--background-color)}.calendar__cell--secondary{color:var(--cal__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(--cal--font-family);color:var(--cal--color);text-shadow:var(--cal--text-shadow)}.calendar__cell--selected,.calendar__cell--selected:hover{background-color:var(--cal__cell--selected--background-color);color:var(--cal__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(--cal--font-family);text-shadow:var(--cal--text-shadow);color:var(--cal__btn-today--color);border-radius:var(--cal__btn-today--border-radius)}.calendar__btn-today:hover{background-color:var(--cal__btn-today--hover--background-color)}";
 
-const EzCalendar = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.ezChange = index.createEvent(this, "ezChange", 7);
-    this._firstRender = true;
-    this._todayLabel = 'Hoje';
-    this._weekDayLabels = ['D', 'S', 'T', 'Q', 'Q', 'S', 'S'];
-    this._monthLabels = ['Janeiro', 'Fevereiro', 'Março', 'Abril', 'Maio', 'Junho', 'Julho', 'Agosto', 'Setembro', 'Outubro', 'Novembro', 'Dezembro'];
-    /**
-     * A data selecionada no calendário
-     */
-    this.value = new Date();
-    /**
-     * No modo floating o calendário só se tornará visível
-     * quando o método show() for acionado.
-     */
-    this.floating = false;
-  }
-  /**
-   * Usado no modo floating. Faz com que o componente seja exibido.
-   * É possível determinar ajustes de posicionamento através dos parâmetros
-   * top, left, bottom e right. Esses parâmetros devem ser informados como
-   * strings no formato css.
-   */
-  async show(top, left, bottom, right) {
-    if (this.floating) {
-      this._floatingID = FloatingManager.float(this._box, this._container, { autoClose: true, top, left, bottom, right });
-    }
-  }
-  /**
-   * Usado no modo floating. Faz com que o componente seja ocultado.
-   */
-  async hide() {
-    if (this._floatingID !== undefined) {
-      FloatingManager.close(this._floatingID);
-      this._floatingID = undefined;
-    }
-  }
-  valueChanged() {
-    if (this.value) {
-      this._currentPosition.setTime(this.value.getTime());
-      this._currentPosition.setDate(1);
-    }
-  }
-  getMonthLabel() {
-    return this._monthLabels[this._currentPosition.getMonth()] + " " + this._currentPosition.getFullYear();
-  }
-  isSelectedDate(d) {
-    if (this.value) {
-      return this.value.getDate() == d.getDate() && this.value.getMonth() == d.getMonth() && this.value.getFullYear() == d.getFullYear();
-    }
-    return false;
-  }
-  changeMonth(offset) {
-    this._currentPosition.setMonth(this._currentPosition.getMonth() + offset);
-    index.forceUpdate(this);
-  }
-  selectDate(d) {
-    this.value = d;
-    this.ezChange.emit();
-  }
-  componentDidRender() {
-    if (this.floating && this._firstRender) {
-      this._box.remove();
-      this._firstRender = false;
-    }
-  }
-  render() {
-    if (this._currentPosition == null) {
-      this._currentPosition = new Date();
-      this._currentPosition.setTime(this.value.getTime());
-      this._currentPosition.setDate(1);
-    }
-    const firstDate = new Date();
-    firstDate.setTime(this._currentPosition.getTime());
-    firstDate.setDate(1 - firstDate.getDay());
-    return (index.h("section", { ref: elem => this._container = elem }, index.h("div", { class: "calendar", ref: elem => this._box = elem }, index.h("div", { class: "calendar__header" }, index.h("button", { class: "calendar__btn-previous", onClick: () => this.changeMonth(-1) }), index.h("label", { class: "calendar__lbl-month" }, this.getMonthLabel()), index.h("button", { class: "calendar__btn-next", onClick: () => this.changeMonth(1) })), index.h("div", { class: "calendar__body" }, index.h("div", { class: "calendar__line" }, this._weekDayLabels.map(day => index.h("div", { class: "calendar__cell calendar__cell--unselectable" }, day))), [0, 7, 14, 21, 28, 35].map(offset => index.h("div", { class: "calendar__line" }, [0, 1, 2, 3, 4, 5, 6].map(index$1 => {
-      const date = new Date();
-      date.setTime(firstDate.getTime());
-      date.setDate(date.getDate() + offset + index$1);
-      let classNames = "calendar__cell";
-      if (this._currentPosition.getMonth() != date.getMonth()) {
-        classNames += " calendar__cell--secondary";
-      }
-      else if (this.isSelectedDate(date)) {
-        classNames += " calendar__cell--selected";
-      }
-      return index.h("div", { class: classNames, onClick: () => this.selectDate(date) }, date.getDate());
-    })))), index.h("div", { class: "calendar__footer" }, index.h("button", { class: "calendar__btn-today", onClick: () => this.selectDate(new Date()) }, this._todayLabel)))));
-  }
-  static get watchers() { return {
-    "value": ["valueChanged"]
-  }; }
-};
+const EzCalendar = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.ezChange = index.createEvent(this, "ezChange", 7);
+    this._firstRender = true;
+    this._todayLabel = 'Hoje';
+    this._weekDayLabels = ['D', 'S', 'T', 'Q', 'Q', 'S', 'S'];
+    this._monthLabels = ['Janeiro', 'Fevereiro', 'Março', 'Abril', 'Maio', 'Junho', 'Julho', 'Agosto', 'Setembro', 'Outubro', 'Novembro', 'Dezembro'];
+    /**
+     * A data selecionada no calendário
+     */
+    this.value = new Date();
+    /**
+     * No modo floating o calendário só se tornará visível
+     * quando o método show() for acionado.
+     */
+    this.floating = false;
+  }
+  /**
+   * Usado no modo floating. Faz com que o componente seja exibido.
+   * É possível determinar ajustes de posicionamento através dos parâmetros
+   * top, left, bottom e right. Esses parâmetros devem ser informados como
+   * strings no formato css.
+   */
+  async show(top, left, bottom, right) {
+    if (this.floating) {
+      this._floatingID = FloatingManager.float(this._box, this._container, { autoClose: true, top, left, bottom, right });
+    }
+  }
+  /**
+   * Usado no modo floating. Faz com que o componente seja ocultado.
+   */
+  async hide() {
+    if (this._floatingID !== undefined) {
+      FloatingManager.close(this._floatingID);
+      this._floatingID = undefined;
+    }
+  }
+  valueChanged() {
+    if (this.value) {
+      this._currentPosition.setTime(this.value.getTime());
+      this._currentPosition.setDate(1);
+    }
+  }
+  getMonthLabel() {
+    return this._monthLabels[this._currentPosition.getMonth()] + " " + this._currentPosition.getFullYear();
+  }
+  isSelectedDate(d) {
+    if (this.value) {
+      return this.value.getDate() == d.getDate() && this.value.getMonth() == d.getMonth() && this.value.getFullYear() == d.getFullYear();
+    }
+    return false;
+  }
+  changeMonth(offset) {
+    this._currentPosition.setMonth(this._currentPosition.getMonth() + offset);
+    index.forceUpdate(this);
+  }
+  selectDate(d) {
+    this.value = d;
+    this.ezChange.emit();
+  }
+  componentDidRender() {
+    if (this.floating && this._firstRender) {
+      this._box.remove();
+      this._firstRender = false;
+    }
+  }
+  render() {
+    if (this._currentPosition == null) {
+      this._currentPosition = new Date();
+      this._currentPosition.setTime(this.value.getTime());
+      this._currentPosition.setDate(1);
+    }
+    const firstDate = new Date();
+    firstDate.setTime(this._currentPosition.getTime());
+    firstDate.setDate(1 - firstDate.getDay());
+    return (index.h("section", { ref: elem => this._container = elem }, index.h("div", { class: "calendar", ref: elem => this._box = elem }, index.h("div", { class: "calendar__header" }, index.h("button", { class: "calendar__btn-previous", onClick: () => this.changeMonth(-1) }), index.h("label", { class: "calendar__lbl-month" }, this.getMonthLabel()), index.h("button", { class: "calendar__btn-next", onClick: () => this.changeMonth(1) })), index.h("div", { class: "calendar__body" }, index.h("div", { class: "calendar__line" }, this._weekDayLabels.map(day => index.h("div", { class: "calendar__cell calendar__cell--unselectable" }, day))), [0, 7, 14, 21, 28, 35].map(offset => index.h("div", { class: "calendar__line" }, [0, 1, 2, 3, 4, 5, 6].map(index$1 => {
+      const date = new Date();
+      date.setTime(firstDate.getTime());
+      date.setDate(date.getDate() + offset + index$1);
+      let classNames = "calendar__cell";
+      if (this._currentPosition.getMonth() != date.getMonth()) {
+        classNames += " calendar__cell--secondary";
+      }
+      else if (this.isSelectedDate(date)) {
+        classNames += " calendar__cell--selected";
+      }
+      return index.h("div", { class: classNames, onClick: () => this.selectDate(date) }, date.getDate());
+    })))), index.h("div", { class: "calendar__footer" }, index.h("button", { class: "calendar__btn-today", onClick: () => this.selectDate(new Date()) }, this._todayLabel)))));
+  }
+  static get watchers() { return {
+    "value": ["valueChanged"]
+  }; }
+};
 EzCalendar.style = ezCalendarCss;
 
 const ezCheckCss = ":host{--chk--box--width:18px;--chk--box--height:18px;--chk--width:calc(var(--chk--box--width) + 14px);--chk--height:calc(var(--chk--box--width) + 14px);--chk--border-radius:var(--border--radius-small);--chk--checked--background-color:var(--color--primary-200);--chk--focus--background-color:var(--color--strokes, #FFFFFF);--chk--hover--background-color:var(--background--medium);--chk--checked--disabled--background-color:var(--color--disable-secondary);--chk--border:var(--border--medium) var(--title--primary);--chk--disabled--border:var(--border--medium) var(--color--strokes);--chk--checked--border:var(--border--medium) var(--color--primary);--chk--checked--hover--background-color:var(--color--primary-200);--chk--checked--focus--background-color:var(--color--primary-300, #FFFFFF);--chk--check--clip-path:polygon(40% 70%, 46% 73%, 51% 71%, 93% 21%, 93% 16%, 83% 8%, 76% 9%, 47% 45%, 43% 44%, 38% 39%, 30% 37%, 22% 47%, 23% 54%, 40% 70%);--chk--check--background-color:var(--color--primary);--chk--check--disabled--background-color:var(--color--strokes);--swt--slider--width:34px;--swt--slider--height:14px;--swt--pin--width:20px;--swt--pin--height:20px;--swt--focus--width:32px;--swt--focus--height:32px;--swt--background-color:var(--color--strokes);--swt--disabled--background-color:var(--color--disable-secondary);--swt--checked--background-color:var(--color--primary-300);--swt--pin--background-color:var(--background--xlight);--swt--pin--disabled--background-color:var(--color--disable-secondary);--swt--pin--checked--background-color:var(--color--primary);--swt--pin--checked--disabled--background-color:#E8F7F4;--swt--pin--focus--background-color:var(--text--disable);--swt--pin--checked--focus--background-color:var(--color--primary);width:100%}input.regularMode{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;box-sizing:border-box;-webkit-appearance:none;cursor:pointer;border-radius:50%;width:var(--chk--width);height:var(--chk--height)}input.regularMode:enabled:hover{background-color:var(--chk--hover--background-color)}input.regularMode:enabled:focus{outline:none;background-color:var(--chk--focus--background-color)}input.regularMode:disabled{cursor:auto;background:none}input.regularMode::before{box-sizing:border-box;content:\"\";display:block;width:var(--chk--box--width);height:var(--chk--box--height);border-radius:var(--chk--border-radius);border:var(--chk--border)}input.regularMode:disabled::before{border:var(--chk--disabled--border)}input.regularMode:checked:enabled:hover{background-color:var(--chk--checked--hover--background-color)}input.regularMode:checked:enabled:focus{background-color:var(--chk--checked--focus--background-color)}input.regularMode:checked::before{border:var(--chk--checked--border);background-color:var(--chk--checked--background-color)}input.regularMode:checked:disabled:before{border:var(--chk--disabled--border);background-color:var(--chk--checked--disabled--background-color)}input.regularMode:checked::after{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;content:\"\";position:absolute;margin-top:3px;margin-left:-1px;width:12px;height:12px;background-color:var(--chk--check--background-color);clip-path:var(--chk--check--clip-path)}input.regularMode:checked:disabled::after{background-color:var(--chk--check--disabled--background-color)}input.switchMode{appearance:none;position:relative;outline:none;cursor:pointer;border-radius:20px;border:none;transition:background-color var(--transition);width:var(--swt--slider--width);height:var(--swt--slider--height);background-color:var(--swt--background-color)}input.switchMode:disabled{background-color:var(--swt--disabled--background-color)}input.switchMode::after{content:\"\";display:block;position:absolute;box-shadow:var(--shadow);transition:transform var(--transition);transition:background-color var(--transition);transform:translateY(-3px);border-radius:50%;width:var(--swt--pin--width);height:var(--swt--pin--height);background-color:var(--swt--pin--background-color)}input.switchMode:disabled::after{background-color:var(--swt--pin--disabled--background-color)}input.switchMode:checked{transition:background-color var(--transition);background-color:var(--swt--checked--background-color)}input.switchMode::before{display:block;content:\"\";display:block;position:absolute;border-radius:50%;opacity:0;width:var(--swt--focus--width);height:var(--swt--focus--height);top:calc((var(--swt--slider--height) - var(--swt--focus--height)) / 2);left:calc((var(--swt--pin--width) - var(--swt--focus--width))/2);background-color:var(--swt--pin--focus--background-color)}input.switchMode:focus::before{opacity:0.24;transition:opacity var(--transition)}input.switchMode:checked:focus::before{background-color:var(--swt--pin--checked--focus--background-color);transform:translateX(calc(var(--swt--slider--width) - var(--swt--pin--width)))}input.switchMode:checked::after{transition:transform var(--transition);transition:background-color var(--transition);transform:translateX(calc(var(--swt--slider--width) - var(--swt--pin--width))) translateY(-3px);box-shadow:var(--shadow);background-color:var(--swt--pin--checked--background-color)}input.switchMode:checked:disabled::after{background-color:var(--swt--pin--checked--disabled--background-color)}";
 
-const EzCheck = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.valueChange = index.createEvent(this, "valueChange", 7);
-    /**
-     * Deixa o campo disponível ou não interagir com o usuário.
-     */
-    this.enabled = true;
-    /**
-     * Existem dois modos de visualização: regular e switch.
-     * Se esta propriedade for omitida, o componete assume o formato "regular";
-     * No modo "regular" a visualização é a tradicional de uma caixinha marcada/desmarcada.
-     * No modo "switch" o campo tem uma interface em formato de um pino liga/desliga.
-     */
-    this.mode = "regular";
-  }
-  adjustMode() {
-    if (this.mode === "switch") {
-      this._inputElem.classList.remove("regularMode");
-      this._inputElem.classList.add("switchMode");
-    }
-    else {
-      this._inputElem.classList.remove("switchMode");
-      this._inputElem.classList.add("regularMode");
-    }
-  }
-  //---------------------------------------------
-  // Public methods
-  //---------------------------------------------
-  /**
-   * Devolve o modo escolhido para o componente
-   */
-  async getMode() {
-    return this.mode;
-  }
-  /**
-   * Faz o foco no componente de input
-   */
-  async setFocus() {
-    this._inputElem.focus();
-  }
-  componentDidLoad() {
-    this.adjustMode();
-  }
-  changeValue() {
-    this.value = !this.value;
-    this.valueChange.emit();
-  }
-  render() {
-    return (index.h("input", { type: "checkbox", class: "regularMode", checked: this.value === true, onChange: () => { this.changeValue(); }, disabled: !this.enabled, ref: (el) => this._inputElem = el }));
-  }
-  static get watchers() { return {
-    "mode": ["adjustMode"]
-  }; }
-};
+const EzCheck = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.valueChange = index.createEvent(this, "valueChange", 7);
+    /**
+     * Deixa o campo disponível ou não interagir com o usuário.
+     */
+    this.enabled = true;
+    /**
+     * Existem dois modos de visualização: regular e switch.
+     * Se esta propriedade for omitida, o componete assume o formato "regular";
+     * No modo "regular" a visualização é a tradicional de uma caixinha marcada/desmarcada.
+     * No modo "switch" o campo tem uma interface em formato de um pino liga/desliga.
+     */
+    this.mode = "regular";
+  }
+  adjustMode() {
+    if (this.mode === "switch") {
+      this._inputElem.classList.remove("regularMode");
+      this._inputElem.classList.add("switchMode");
+    }
+    else {
+      this._inputElem.classList.remove("switchMode");
+      this._inputElem.classList.add("regularMode");
+    }
+  }
+  //---------------------------------------------
+  // Public methods
+  //---------------------------------------------
+  /**
+   * Devolve o modo escolhido para o componente
+   */
+  async getMode() {
+    return this.mode;
+  }
+  /**
+   * Faz o foco no componente de input
+   */
+  async setFocus() {
+    this._inputElem.focus();
+  }
+  componentDidLoad() {
+    this.adjustMode();
+  }
+  changeValue() {
+    this.value = !this.value;
+    this.valueChange.emit();
+  }
+  render() {
+    return (index.h("input", { type: "checkbox", class: "regularMode", checked: this.value === true, onChange: () => { this.changeValue(); }, disabled: !this.enabled, ref: (el) => this._inputElem = el }));
+  }
+  static get watchers() { return {
+    "mode": ["adjustMode"]
+  }; }
+};
 EzCheck.style = ezCheckCss;
 
 const ezCollapsableBoxCss = ":host{--collapsable-box--height:42px;--collapsable-box--font-size:var(--title--medium, 14px);--collapsable-box--font-family:var(--font-pattern, Arial);--collapsable-box--font-weight:var(--text-weight--large, 600);--collapsable-box--color:var(--title--primary);--collapsable-box__btn--path:path(\"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\");--collapsable-box__btn--fill:var(--collapsable-box--color);--collapsable-box__btn--width:10px;--collapsable-box__btn--height:16px;display:flex;flex-wrap:wrap;width:100%}.collapsable-box__title{width:100%;display:flex;box-sizing:border-box}.collapsable-box__label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:100%;font-family:var(--collapsable-box--font-family);font-size:var(--collapsable-box--font-size);font-weight:var(--collapsable-box--font-weight);color:var(--collapsable-box--color)}.collapsable-box__btn{outline:none;border:none;background-color:unset;cursor:pointer;padding:1px 6px}.collapsable-box__btn::after{content:'';display:flex;clip-path:var(--collapsable-box__btn--path);background-color:var( --collapsable-box__btn--fill);width:var(--collapsable-box__btn--width);height:var(--collapsable-box__btn--height);transition:transform var(--transition);transform:rotate(90deg)}.collapsable-box__btn--collapsed::after{transform:rotate(0deg)}";
 
-const EzCollapsableBox = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.ezChange = index.createEvent(this, "ezChange", 7);
-    /**
-     * Valor externalizado que garante a exibição ou não do componente
-     */
-    this.value = false;
-  }
-  observeValue() {
-    this.ezChange.emit();
-  }
-  /**
-   * Esconde ou revela o conteúdo do componente
-   */
-  async showHide() {
-    this.value = !this.value;
-  }
-  render() {
-    return (index.h(index.Host, null, index.h("div", { class: "collapsable-box__title" }, index.h("button", { class: this.value ? "collapsable-box__btn collapsable-box__btn--collapsed" : "collapsable-box__btn", onClick: () => this.showHide() }), index.h("label", { class: "collapsable-box__label", title: this.label }, this.label)), !this.value ? index.h("slot", null) : null));
-  }
-  static get watchers() { return {
-    "value": ["observeValue"]
-  }; }
-};
+const EzCollapsableBox = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.ezChange = index.createEvent(this, "ezChange", 7);
+    /**
+     * Valor externalizado que garante a exibição ou não do componente
+     */
+    this.value = false;
+  }
+  observeValue() {
+    this.ezChange.emit();
+  }
+  /**
+   * Esconde ou revela o conteúdo do componente
+   */
+  async showHide() {
+    this.value = !this.value;
+  }
+  render() {
+    return (index.h(index.Host, null, index.h("div", { class: "collapsable-box__title" }, index.h("button", { class: this.value ? "collapsable-box__btn collapsable-box__btn--collapsed" : "collapsable-box__btn", onClick: () => this.showHide() }), index.h("label", { class: "collapsable-box__label", title: this.label }, this.label)), !this.value ? index.h("slot", null) : null));
+  }
+  static get watchers() { return {
+    "value": ["observeValue"]
+  }; }
+};
 EzCollapsableBox.style = ezCollapsableBoxCss;
 
 const ezComboBoxCss = ":host{--cx--height:42px;--cx--width:100%;--cx__icon--width:48px;--cx--border-radius:var(--border--radius-medium, 12px);--cx--border-radius-small:var(--border--radius-small, 6px);--cx--font-size:var(--text--medium, 14px);--cx--font-family:var(--font-pattern, Arial);--cx--font-weight--large:var(--text-weight--large, 500);--cx--font-weight--medium:var(--text-weight--medium, 400);--cx--space--medium:var(--space--medium, 12px);--cx--space--small:var(--space--small, 6px);--cx--shadow:var(--shadow, 0px 0px 16px 0px rgba(0, 38, 111, .12));--cx--background-color--xlight:var(--background--xlight,#fff);--cx__input--background-color:var(--background--medium, #e0e0e0);--cx__input--border:var(--border--medium, 2px solid);--cx__input--border-color:var(--cx__input--background-color);--cx__input--focus--border-color:var(--color--primary, #008561);--cx__input--disabled--background-color:var(--color--disable-secondary, #F2F5F8);--cx__input--disabled--color:var(--text--disable, #AFB6C0);--cx__input--error--border-color:#CC2936;--cx__label--color:var(--title--primary, #919191);--cx__message_box--font-size:var(--text--small, 12px);--cx__message_box--info--color:var(--color--success, #22085d);--cx__message_box--error--color:var(--color--error, #FF0000);--cx__list-text--primary:var(--text--primary,#626e82);--cx__list-text--secondary:var(--text--secondary,#a2abb9);--cx__list-height:calc(var(--cx--font-size) + var(--cx--space--medium));display:flex;flex-wrap:wrap;position:relative;width:var(--cx--width)}ez-text-input{--it__input--background-color:var(--cx__input--background-color, #FFFFFF);--it__input--border-color:var(--cx__input--border-color, #DCE0E8)}.invisible{visibility:hidden}.list-container{scroll-behavior:smooth;z-index:var(--cx__list-z-index);padding:var(--cx--space--small);background:var(--cx--background-color--xlight);border-radius:var(--cx--border-radius);width:100%;overflow:auto;box-sizing:border-box;max-height:calc(4*var(--cx__list-height) + 2*var(--cx--space--small))}li{list-style-type:none;border-radius:var(--cx--border-radius-small);padding:0 var(--cx--space--small);display:flex;justify-content:space-between;align-items:center}li:hover{background-color:var(--background--medium)}.--li--preselected{background-color:var(--background--strong)}.--li__spanlabel{color:var(--cx__list-text--primary);border-radius:var(--cx--border-radius-small);padding:0 var(--cx--space--small);height:var(--cx__list-height);font-weight:var(--cx--font-weight--large);font-family:var(--cx--font-family);line-height:var(--cx__list-height);vertical-align:middle;text-overflow:ellipsis;width:80%;min-width:30px;overflow-x:hidden;text-align:left}.--li__spanlabel--full-width{color:var(--cx__list-text--primary);border-radius:var(--cx--border-radius-small);padding:0 var(--cx--space--small);height:var(--cx__list-height);font-weight:var(--cx--font-weight--large);font-family:var(--cx--font-family);line-height:var(--cx__list-height);vertical-align:middle;text-overflow:ellipsis;width:100%;min-width:30px;overflow-x:hidden;text-align:left}.--li__spanvalue{color:var(--cx__list-text--secondary);border-radius:var(--cx--border-radius-small);padding:0 var(--cx--space--small);height:var(--cx__list-height);font-weight:var(--cx--font-weight--medium);font-family:var(--cx--font-family);line-height:var(--cx__list-height);vertical-align:middle;text-overflow:ellipsis;width:20%;min-width:20px;overflow-x:hidden;text-align:left}.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(--text--primary, #008561);width:16px;height:16px;clip-path:path(\"M 1.8585859,3.0707069 7.9999998,9.2121212 14.141414,3.0707069 16,5.0101006 7.9999998,12.929293 0,4.9292932 Z\")}.btn-open-options:disabled:after{background-color:var(--text--disable, #AFB6C0)}.btn-open-options:enabled:hover::after{background-color:var(--color--primary, #4e4e4e)}";
 
-const EzComboBox = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.ezChange = index.createEvent(this, "ezChange", 7);
-    this._inputLabelValue = '';
-    /**
-     * Valor associado ao componente. Este é o valor que o componente recebe ao selecionar uma opção do combobox.
-     * Pode ser Label ou Value de acordo com a opção "labelasindex"
-     * Caso seja atribuído um valor ao componente que não esteja na relação das options, este vai lançar msg de erro
-     * (executo pala valor undefined)
-     */
-    this.value = undefined;
-    /**
-     * Label é o título do campo
-     */
-    this.label = undefined;
-    /**
-     * Deixa o campo disponível ou não para digitação.
-     */
-    this.enabled = true;
-    /**
-     * Ajusta a opção de mostrar o "value" para cada "label". Como default "value" não está presente (showvalue = false)
-     */
-    this.showvalue = false;
-  }
-  //---------------------------------------------
-  // Public methods
-  //---------------------------------------------
-  /**
-   * Faz o foco no componente de textarea
-   */
-  async setFocus() {
-    this._textInput.setFocus();
-  }
-  /**
-   * Remove o foco no componente de textarea
-   */
-  async setBlur() {
-    this._textInput.setBlur();
-  }
-  updateValue() {
-    const selectedOption = this.options.filter(opt => opt.value === this.value);
-    if (selectedOption && selectedOption.length > 0) {
-      this._textInput.value = selectedOption[0].label;
-    }
-    else {
-      this.value = null;
-      this._textInput.value = '';
-    }
-  }
-  setErrorMessage() {
-    this._textInput.errormessage = this.errormessage;
-  }
-  showOptions() {
-    if (this.enabled) {
-      this._criteria = undefined;
-      const top = this._textInput.errormessage ? '0px' : '-17px';
-      this._popover.show(top);
-    }
-  }
-  updateSelection() {
-    const selectedOption = this.options.filter(opt => opt.label === this._textInput.value);
-    this.selectOption((selectedOption && selectedOption.length > 0) ? selectedOption[0] : null);
-  }
-  selectOption(opt) {
-    this._popover.hide();
-    this.value = opt ? opt.value : null;
-    this.ezChange.emit();
-  }
-  buildItem(opt, index$1) {
-    const className = index$1 === this._preSelection ? "--li--preselected" : "";
-    return index.h("li", { class: className, key: opt.value, id: 'item_' + opt.value, onMouseDown: () => this.selectOption(opt) }, this.highlightMatch(opt.label), this.showvalue ? index.h("span", { class: '--li__spanvalue' }, opt.value) : null);
-  }
-  highlightMatch(label) {
-    const spanClassName = this.showvalue ? '--li__spanlabel' : '--li__spanlabel--full-width';
-    if (this._criteria) {
-      const criteriaLength = this._criteria.length;
-      const matchStart = label.toUpperCase().indexOf(this._criteria);
-      if (matchStart > -1) {
-        const strLabelStart = label.substr(0, matchStart);
-        const strLabelEnd = label.substr(matchStart + criteriaLength);
-        const strMatch = label.substr(matchStart, criteriaLength);
-        return (index.h("span", { class: spanClassName }, strLabelStart, index.h("strong", null, strMatch), strLabelEnd));
-      }
-    }
-    return (index.h("span", { class: spanClassName }, label));
-  }
-  matchOptions() {
-    this.showOptions();
-    this._criteria = this._textInput.value.toLocaleUpperCase();
-    this.filterOptions();
-  }
-  filterOptions() {
-    this._preSelection = undefined;
-    let opts = (this.options || []);
-    if (this._criteria) {
-      opts = opts.filter(opt => opt.label.toLocaleUpperCase().indexOf(this._criteria) > -1);
-    }
-    this._visibleOptions = [{ value: '', label: '' }].concat(opts);
-  }
-  nextOption() {
-    this.showOptions();
-    this._preSelection = this._preSelection === undefined ? 0 : Math.min(this._preSelection + 1, this._visibleOptions.length - 1);
-    this.scrollToOption(this._visibleOptions[this._preSelection]);
-  }
-  previousOption() {
-    this._preSelection = this._preSelection === undefined ? 0 : Math.max(this._preSelection - 1, 0);
-    this.scrollToOption(this._visibleOptions[this._preSelection]);
-  }
-  scrollToOption(opt) {
-    const liElem = this.el.shadowRoot.querySelector(`li#item_${opt.value}`);
-    if (liElem) {
-      const parent = liElem.parentElement;
-      const parentRect = parent.getBoundingClientRect();
-      const itemRect = liElem.getBoundingClientRect();
-      if (itemRect.bottom > parentRect.bottom || itemRect.top < parentRect.top) {
-        liElem.scrollIntoView();
-      }
-    }
-  }
-  selectCurrentOption() {
-    if (this._preSelection !== undefined) {
-      this.selectOption(this._visibleOptions[this._preSelection]);
-      this._preSelection = undefined;
-    }
-  }
-  keyDownHandler(event) {
-    switch (event.key) {
-      case "ArrowDown":
-        this.nextOption();
-        break;
-      case "ArrowUp":
-        this.previousOption();
-        break;
-      case "Enter":
-        this.selectCurrentOption();
-        break;
-    }
-    event.stopPropagation();
-  }
-  //---------------------------------------------
-  // Lifecycle web component
-  //---------------------------------------------
-  componentWillLoad() {
-    if (this.options === undefined) {
-      this.options = [];
-      const optionsTags = this.el.querySelectorAll('option');
-      if (optionsTags) {
-        optionsTags.forEach(e => {
-          let label = e.innerText;
-          let value = e.getAttribute('value');
-          if (!value) {
-            value = label;
-          }
-          this.options.push({ label, value });
-          e.hidden = true;
-        });
-      }
-    }
-    this.filterOptions();
-  }
-  componentDidLoad() {
-    this.updateValue();
-  }
-  render() {
-    return (index.h(index.Host, null, index.h("ez-text-input", { ref: (el) => this._textInput = el, value: this._inputLabelValue, enabled: this.enabled, onInput: () => this.matchOptions(), onClick: () => this.showOptions(), onFocusout: () => this.updateSelection(), onEzChange: event => event.stopPropagation(), onKeyDown: event => this.keyDownHandler(event), label: this.label, errormessage: this.errormessage }, index.h("button", { disabled: !this.enabled, tabindex: -1, class: "btn-open-options", slot: "rightIcon", onClick: () => this.showOptions() })), index.h("ez-popover", { boxwidth: "100%", ref: el => this._popover = el, autoclose: true }, index.h("div", { class: "list-container" }, this._visibleOptions.map((opt, index) => this.buildItem(opt, index))))));
-  }
-  ;
-  get el() { return index.getElement(this); }
-  static get watchers() { return {
-    "value": ["updateValue"],
-    "errormessage": ["setErrorMessage"]
-  }; }
-};
+const EzComboBox = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.ezChange = index.createEvent(this, "ezChange", 7);
+    this._inputLabelValue = '';
+    /**
+     * Valor associado ao componente. Este é o valor que o componente recebe ao selecionar uma opção do combobox.
+     * Pode ser Label ou Value de acordo com a opção "labelasindex"
+     * Caso seja atribuído um valor ao componente que não esteja na relação das options, este vai lançar msg de erro
+     * (executo pala valor undefined)
+     */
+    this.value = undefined;
+    /**
+     * Label é o título do campo
+     */
+    this.label = undefined;
+    /**
+     * Deixa o campo disponível ou não para digitação.
+     */
+    this.enabled = true;
+    /**
+     * Ajusta a opção de mostrar o "value" para cada "label". Como default "value" não está presente (showvalue = false)
+     */
+    this.showvalue = false;
+  }
+  //---------------------------------------------
+  // Public methods
+  //---------------------------------------------
+  /**
+   * Faz o foco no componente de textarea
+   */
+  async setFocus() {
+    this._textInput.setFocus();
+  }
+  /**
+   * Remove o foco no componente de textarea
+   */
+  async setBlur() {
+    this._textInput.setBlur();
+  }
+  updateValue() {
+    const selectedOption = this.options.filter(opt => opt.value === this.value);
+    if (selectedOption && selectedOption.length > 0) {
+      this._textInput.value = selectedOption[0].label;
+    }
+    else {
+      this.value = null;
+      this._textInput.value = '';
+    }
+  }
+  setErrorMessage() {
+    this._textInput.errormessage = this.errormessage;
+  }
+  showOptions() {
+    if (this.enabled) {
+      this._criteria = undefined;
+      const top = this._textInput.errormessage ? '0px' : '-17px';
+      this._popover.show(top);
+    }
+  }
+  updateSelection() {
+    const selectedOption = this.options.filter(opt => opt.label === this._textInput.value);
+    this.selectOption((selectedOption && selectedOption.length > 0) ? selectedOption[0] : null);
+  }
+  selectOption(opt) {
+    this._popover.hide();
+    this.value = opt ? opt.value : null;
+    this.ezChange.emit();
+  }
+  buildItem(opt, index$1) {
+    const className = index$1 === this._preSelection ? "--li--preselected" : "";
+    return index.h("li", { class: className, key: opt.value, id: 'item_' + opt.value, onMouseDown: () => this.selectOption(opt) }, this.highlightMatch(opt.label), this.showvalue ? index.h("span", { class: '--li__spanvalue' }, opt.value) : null);
+  }
+  highlightMatch(label) {
+    const spanClassName = this.showvalue ? '--li__spanlabel' : '--li__spanlabel--full-width';
+    if (this._criteria) {
+      const criteriaLength = this._criteria.length;
+      const matchStart = label.toUpperCase().indexOf(this._criteria);
+      if (matchStart > -1) {
+        const strLabelStart = label.substr(0, matchStart);
+        const strLabelEnd = label.substr(matchStart + criteriaLength);
+        const strMatch = label.substr(matchStart, criteriaLength);
+        return (index.h("span", { class: spanClassName }, strLabelStart, index.h("strong", null, strMatch), strLabelEnd));
+      }
+    }
+    return (index.h("span", { class: spanClassName }, label));
+  }
+  matchOptions() {
+    this.showOptions();
+    this._criteria = this._textInput.value.toLocaleUpperCase();
+    this.filterOptions();
+  }
+  filterOptions() {
+    this._preSelection = undefined;
+    let opts = (this.options || []);
+    if (this._criteria) {
+      opts = opts.filter(opt => opt.label.toLocaleUpperCase().indexOf(this._criteria) > -1);
+    }
+    this._visibleOptions = [{ value: '', label: '' }].concat(opts);
+  }
+  nextOption() {
+    this.showOptions();
+    this._preSelection = this._preSelection === undefined ? 0 : Math.min(this._preSelection + 1, this._visibleOptions.length - 1);
+    this.scrollToOption(this._visibleOptions[this._preSelection]);
+  }
+  previousOption() {
+    this._preSelection = this._preSelection === undefined ? 0 : Math.max(this._preSelection - 1, 0);
+    this.scrollToOption(this._visibleOptions[this._preSelection]);
+  }
+  scrollToOption(opt) {
+    const liElem = this.el.shadowRoot.querySelector(`li#item_${opt.value}`);
+    if (liElem) {
+      const parent = liElem.parentElement;
+      const parentRect = parent.getBoundingClientRect();
+      const itemRect = liElem.getBoundingClientRect();
+      if (itemRect.bottom > parentRect.bottom || itemRect.top < parentRect.top) {
+        liElem.scrollIntoView();
+      }
+    }
+  }
+  selectCurrentOption() {
+    if (this._preSelection !== undefined) {
+      this.selectOption(this._visibleOptions[this._preSelection]);
+      this._preSelection = undefined;
+    }
+  }
+  keyDownHandler(event) {
+    switch (event.key) {
+      case "ArrowDown":
+        this.nextOption();
+        break;
+      case "ArrowUp":
+        this.previousOption();
+        break;
+      case "Enter":
+        this.selectCurrentOption();
+        break;
+    }
+    event.stopPropagation();
+  }
+  //---------------------------------------------
+  // Lifecycle web component
+  //---------------------------------------------
+  componentWillLoad() {
+    if (this.options === undefined) {
+      this.options = [];
+      const optionsTags = this.el.querySelectorAll('option');
+      if (optionsTags) {
+        optionsTags.forEach(e => {
+          let label = e.innerText;
+          let value = e.getAttribute('value');
+          if (!value) {
+            value = label;
+          }
+          this.options.push({ label, value });
+          e.hidden = true;
+        });
+      }
+    }
+    this.filterOptions();
+  }
+  componentDidLoad() {
+    this.updateValue();
+  }
+  render() {
+    return (index.h(index.Host, null, index.h("ez-text-input", { ref: (el) => this._textInput = el, value: this._inputLabelValue, enabled: this.enabled, onInput: () => this.matchOptions(), onClick: () => this.showOptions(), onFocusout: () => this.updateSelection(), onEzChange: event => event.stopPropagation(), onKeyDown: event => this.keyDownHandler(event), label: this.label, errormessage: this.errormessage }, index.h("button", { disabled: !this.enabled, tabindex: -1, class: "btn-open-options", slot: "rightIcon", onClick: () => this.showOptions() })), index.h("ez-popover", { boxwidth: "100%", ref: el => this._popover = el, autoclose: true }, index.h("div", { class: "list-container" }, this._visibleOptions.map((opt, index) => this.buildItem(opt, index))))));
+  }
+  ;
+  get el() { return index.getElement(this); }
+  static get watchers() { return {
+    "value": ["updateValue"],
+    "errormessage": ["setErrorMessage"]
+  }; }
+};
 EzComboBox.style = ezComboBoxCss;
 
 const ezDateInputCss = ":host{display:block;width:100%;--it__input--background-color:var(--background--medium, #e0e0e0);--it__input--border-color:var(--it__input--background-color)}.text-input{--it__input--background-color:inherit;--it__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;clip-path:path(\"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\")}.btn-open-cal:disabled:after{background-color:var(--text--disable, #AFB6C0)}.btn-open-cal:enabled:hover::after{background-color:var(--color--primary, #4e4e4e)}";
 
-const EzDateInput = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.ezChange = index.createEvent(this, "ezChange", 7);
-    /**
-     * Deixa o campo disponível ou não para uso.
-     */
-    this.enabled = true;
-  }
-  setLabel() {
-    this._textInput.label = this.label;
-  }
-  setErrorMessage() {
-    this._textInput.errormessage = this.errormessage;
-  }
-  applyValueToInput() {
-    this._textInput.value = this.getTextValue(this.value);
-  }
-  changeValue(newValue) {
-    newValue = newValue == null ? null : DateUtils.clearTime(newValue);
-    this._textInput.errormessage = "";
-    if (this.getTextValue(newValue) !== this.getTextValue(this.value)) {
-      this.value = newValue;
-      this.ezChange.emit();
-    }
-  }
-  showCalendar() {
-    this.parseDate();
-    this._calendar.value = this.value;
-    //FIXME: Provavelmente isso fará com que o popup abra em uma 
-    //posição errada no futuro. Preferi fazer simples no começo,
-    //porque não quis onerar o text input com essa funcionalidade...
-    const top = this._textInput.errormessage ? '0px' : '-17px';
-    this._calendar.show(top);
-  }
-  hideCalendar() {
-    this.changeValue(this._calendar.value);
-    this._calendar.hide();
-  }
-  parseDate() {
-    const strValue = this._textInput.value;
-    const parsedDate = DateUtils.strToDate(strValue);
-    if (parsedDate || !strValue) {
-      if (this.value === parsedDate) {
-        this.changeValue(this.value);
-      }
-      else {
-        this.changeValue(parsedDate);
-      }
-    }
-    else {
-      this._textInput.errormessage = "O valor digitado não é uma data válida";
-    }
-  }
-  getTextValue(d) {
-    return d ? new Intl.DateTimeFormat('pt-BR').format(d) : null;
-  }
-  render() {
-    return (index.h(index.Host, null, index.h("ez-text-input", { class: "text-input", ref: elem => this._textInput = elem, onBlur: () => this.parseDate(), onKeyDown: event => {
-        if (event.key === 'H' || event.key === 'h')
-          this.changeValue(new Date());
-      }, label: this.label, onEzChange: event => event.stopPropagation(), value: this.getTextValue(this.value), restrict: "0123456789/", enabled: this.enabled, errormessage: this.errormessage }, index.h("button", { disabled: !this.enabled, tabindex: -1, class: "btn-open-cal", onClick: () => this.showCalendar(), slot: "leftIcon" })), index.h("ez-calendar", { onEzChange: (event) => { this.hideCalendar(); event.stopPropagation(); }, floating: true, ref: elem => this._calendar = elem })));
-  }
-  static get watchers() { return {
-    "label": ["setLabel"],
-    "errormessage": ["setErrorMessage"],
-    "value": ["applyValueToInput"]
-  }; }
-};
+const EzDateInput = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.ezChange = index.createEvent(this, "ezChange", 7);
+    /**
+     * Deixa o campo disponível ou não para uso.
+     */
+    this.enabled = true;
+  }
+  setLabel() {
+    this._textInput.label = this.label;
+  }
+  setErrorMessage() {
+    this._textInput.errormessage = this.errormessage;
+  }
+  applyValueToInput() {
+    this._textInput.value = this.getTextValue(this.value);
+  }
+  changeValue(newValue) {
+    newValue = newValue == null ? null : DateUtils.clearTime(newValue);
+    this._textInput.errormessage = "";
+    if (this.getTextValue(newValue) !== this.getTextValue(this.value)) {
+      this.value = newValue;
+      this.ezChange.emit();
+    }
+  }
+  showCalendar() {
+    this.parseDate();
+    this._calendar.value = this.value;
+    //FIXME: Provavelmente isso fará com que o popup abra em uma 
+    //posição errada no futuro. Preferi fazer simples no começo,
+    //porque não quis onerar o text input com essa funcionalidade...
+    const top = this._textInput.errormessage ? '0px' : '-17px';
+    this._calendar.show(top);
+  }
+  hideCalendar() {
+    this.changeValue(this._calendar.value);
+    this._calendar.hide();
+  }
+  parseDate() {
+    const strValue = this._textInput.value;
+    const parsedDate = DateUtils.strToDate(strValue);
+    if (parsedDate || !strValue) {
+      if (this.value === parsedDate) {
+        this.changeValue(this.value);
+      }
+      else {
+        this.changeValue(parsedDate);
+      }
+    }
+    else {
+      this._textInput.errormessage = "O valor digitado não é uma data válida";
+    }
+  }
+  getTextValue(d) {
+    return d ? new Intl.DateTimeFormat('pt-BR').format(d) : null;
+  }
+  render() {
+    return (index.h(index.Host, null, index.h("ez-text-input", { class: "text-input", ref: elem => this._textInput = elem, onBlur: () => this.parseDate(), onKeyDown: event => {
+        if (event.key === 'H' || event.key === 'h')
+          this.changeValue(new Date());
+      }, label: this.label, onEzChange: event => event.stopPropagation(), value: this.getTextValue(this.value), restrict: "0123456789/", enabled: this.enabled, errormessage: this.errormessage }, index.h("button", { disabled: !this.enabled, tabindex: -1, class: "btn-open-cal", onClick: () => this.showCalendar(), slot: "leftIcon" })), index.h("ez-calendar", { onEzChange: (event) => { this.hideCalendar(); event.stopPropagation(); }, floating: true, ref: elem => this._calendar = elem })));
+  }
+  static get watchers() { return {
+    "label": ["setLabel"],
+    "errormessage": ["setErrorMessage"],
+    "value": ["applyValueToInput"]
+  }; }
+};
 EzDateInput.style = ezDateInputCss;
 
 function _defineProperty(obj, key, value) {
@@ -1826,1439 +1826,1525 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "d
 
 const undoable = /*@__PURE__*/getDefaultExportFromCjs(lib);
 
-const inicialState = {
-  currentTabIndex: {},
-  currentRecordIndex: {},
-  changes: {},
-  collapsedGroups: {},
-  newRecordIndex: {}
-};
-function formReducer(state = inicialState, 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;
-  }
-}
-function formNonHistoricReducer(state = { dataLoading: {}, invalidFields: {} }, 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);
-    default:
-      return state;
-  }
-}
-function collapseGroup(state, { collapseId, collapsed }) {
-  const currentCollapsed = Object.assign({}, state.collapsedGroups);
-  if (collapsed) {
-    currentCollapsed[collapseId] = true;
-  }
-  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 });
+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: true
+  }
+};
+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;
+  }
+}
+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;
+  }
+}
+function collapseGroup(state, { collapseId, collapsed }) {
+  const currentCollapsed = Object.assign({}, state.collapsedGroups);
+  if (collapsed) {
+    currentCollapsed[collapseId] = true;
+  }
+  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 });
 }
 
-function removeHandler(dataUnit) {
-  if (confirm("Tem certeza que deseja Remover?")) {
-    dataUnit.remove();
-  }
-}
-const NavigationBar = ({ dataUnit: du }) => {
-  return index.h("div", { class: "col col--sd-12 align--right" },
-    du.cardinality !== '1' ? [
-      index.h("ez-button", { title: "Registro anterior", mode: "icon", enabled: du.hasPrevious(), onClick: () => du.previous(), image: "/themes/default/images/icons/actions-sprite.svg#previous-circle-inverted", class: "button--secondary margin-right--medium" }),
-      index.h("ez-button", { title: "Pr\u00F3ximo registro", mode: "icon", enabled: du.hasNext(), onClick: () => du.next(), image: "/themes/default/images/icons/actions-sprite.svg#next-circle-inverted", class: "button--secondary margin-right--medium" }),
-      index.h("ez-button", { title: "Incluir registro", mode: "icon", onClick: () => du.insert(), image: "/themes/default/images/icons/actions-sprite.svg#plus-circle-inverted", class: "button--secondary margin-right--medium" }),
-      index.h("ez-button", { title: "Remover registro", mode: "icon", enabled: du.hasCurrentRecord(), onClick: () => removeHandler(du), image: "/themes/default/images/icons/actions-sprite.svg#minus-circle-inverted", class: "button--secondary margin-right--medium" })
-    ] : null,
-    index.h("ez-button", { title: "Salvar altera\u00E7\u00F5es", mode: "icon", enabled: du.hasChanges(), onClick: () => du.save(), image: "/themes/default/images/icons/actions-sprite.svg#check-circle-inverted", class: "button--secondary margin-right--medium" }),
-    index.h("ez-button", { title: "Descartar altera\u00E7\u00F5es", mode: "icon", enabled: du.hasChanges(), onClick: () => du.cancel(), image: "/themes/default/images/icons/actions-sprite.svg#close-circle-inverted", class: "button--secondary margin-right--medium" }),
-    index.h("ez-button", { title: "Carregar registros", mode: "icon", onClick: () => du.load(), image: "/themes/default/images/icons/actions-sprite.svg#rotate", class: "button--secondary margin-right--medium" }));
+function removeHandler(dataUnit) {
+  if (confirm("Tem certeza que deseja Remover?")) {
+    dataUnit.remove();
+  }
+}
+const NavigationBar = ({ dataUnit: du, buttonProps }) => {
+  if (buttonProps.previousVisible
+    || buttonProps.nextVisible
+    || buttonProps.addVisible
+    || buttonProps.removeVisible
+    || buttonProps.saveVisible
+    || buttonProps.cancelVisible
+    || buttonProps.reloadVisible) {
+    return index.h("div", { class: "col col--sd-12 align--right" },
+      buttonProps.previousVisible ? index.h("ez-button", { title: "Registro anterior", mode: "icon", 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 ? index.h("ez-button", { title: "Pr\u00F3ximo registro", mode: "icon", 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 ? index.h("ez-button", { label: "Remover", 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 ? index.h("ez-button", { label: "Adicionar", onClick: () => du.insert(), class: "button--secondary margin-right--medium" }) : null,
+      buttonProps.reloadVisible ? index.h("ez-button", { title: "Recarregar", mode: "icon", onClick: () => du.load(), image: "/themes/default/images/icons/actions-sprite.svg#rotate", class: "button--secondary margin-right--medium" }) : null,
+      buttonProps.cancelVisible ? index.h("ez-button", { label: "Cancelar", enabled: du.hasChanges(), onClick: () => du.cancel(), class: "button--secondary margin-right--medium" }) : null,
+      buttonProps.saveVisible ? index.h("ez-button", { label: "Salvar", enabled: du.hasChanges(), onClick: () => du.save(), class: "button--primary margin-right--medium" }) : null);
+  }
+  else {
+    return null;
+  }
 };
 
-var DependencyType;
-(function (DependencyType) {
-  DependencyType["SEARCHING"] = "SEARCHING";
-  DependencyType["REQUIREMENT"] = "REQUIREMENT";
-  DependencyType["VISIBILITY"] = "REQUIREMENT";
+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, source, forceScroll }) => {
-  const { name, label, userInterface, properties, required, dependencies } = source;
-  const value = dataUnit.getValue(name) || null;
-  const loadingData = dataUnit.isLoading();
-  const formattedLabel = required ? `* ${label} (obrigatório)` : label;
-  const errorMessage = dataUnit.getErrorMessage(name);
-  const changeFieldHandler = (newValue) => {
-    dataUnit.changeValue(name, newValue);
-  };
-  switch (userInterface) {
-    case 'LONGTEXT':
-      return index.h("div", { class: "col col--sd-12 padding--small" },
-        index.h("ez-text-area", { label: formattedLabel, onInput: evt => changeFieldHandler(evt.target['value']), value: value || '', errormessage: errorMessage, ref: elem => scrollToView(forceScroll, elem) }));
-    case 'CHECKBOX':
-      return index.h("div", { class: "col col--sd-12 col--tb-3 padding--small" },
-        index.h("ez-check", { onInput: evt => changeFieldHandler(evt.target['value']), ref: elem => scrollToView(forceScroll, elem) }));
-    case 'SWITCH':
-      return index.h("div", { class: "col col--sd-12 col--tb-3 padding--small" },
-        index.h("div", { class: "row" },
-          index.h("div", { class: "col col--sd-2" },
-            index.h("ez-check", { mode: "switch", value: value === "S", ref: elem => scrollToView(forceScroll, elem) })),
-          index.h("div", { class: "col col--sd-10" },
-            index.h("label", { class: "text text--primary text--medium" }, label))));
-    case 'OPTIONSELECTOR':
-      const optsObj = JSON.parse(properties.find(prop => prop.name === 'options').value);
-      return index.h("div", { class: "col col--sd-12 col--tb-3 padding--small" },
-        index.h("ez-combo-box", { value: value, label: formattedLabel, onEzChange: (event) => changeFieldHandler(event.target['value']), errormessage: errorMessage, ref: elem => scrollToView(forceScroll, elem) }, Object.keys(optsObj).map(key => index.h("option", { value: key }, optsObj[key]))));
-    case 'SEARCH':
-      const context = {};
-      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 index.h("div", { class: "col col--sd-12 col--tb-3 padding--small" },
-        index.h("ez-search", { label: label, onEzChange: (event) => changeFieldHandler(event.target['value']), showvalue: true, value: value, loadexecutor: (argument, callback) => dataUnit.fieldSearchExecutor(argument, context, callback) }));
-    case 'DATE':
-      return index.h("div", { class: "col col--sd-12 col--tb-3 padding--small" },
-        index.h("ez-date-input", { label: formattedLabel, enabled: true, value: !value ? null : DateUtils.clearTime(value), onEzChange: (event) => changeFieldHandler(event.target['value']), errormessage: errorMessage, ref: elem => scrollToView(forceScroll, elem) }));
-    //IMAGE, FILE, DATE, DATETIME, ELAPSEDTIME, DECIMALNUMBER, INTEGERNUMBER, PASSWORD, MASKEDTEXT, HTML
-    default:
-      return index.h("div", { class: "col col--sd-12 col--tb-3 padding--small" }, loadingData
-        ?
-          index.h("place-holder", null)
-        :
-          index.h("ez-text-input", { loading: loadingData, label: formattedLabel, onInput: (event) => changeFieldHandler(event.target['value']), value: value, errormessage: errorMessage, ref: elem => scrollToView(forceScroll, elem) }));
-  }
+function scrollToView(forceScroll, elem) {
+  if (forceScroll) {
+    window.requestAnimationFrame(() => elem.scrollIntoView());
+  }
+}
+const Field = ({ dataUnit, source, forceScroll }) => {
+  const { name, label, userInterface, properties, required, dependencies } = source;
+  const value = dataUnit.getValue(name) || null;
+  const loadingData = dataUnit.isLoading();
+  const formattedLabel = required ? `* ${label} (obrigatório)` : label;
+  const errorMessage = dataUnit.getErrorMessage(name);
+  const changeFieldHandler = (newValue) => {
+    dataUnit.changeValue(name, newValue);
+  };
+  switch (userInterface) {
+    case 'LONGTEXT':
+      return index.h("div", { class: "col col--sd-12 padding--small" },
+        index.h("ez-text-area", { label: formattedLabel, onInput: evt => changeFieldHandler(evt.target['value']), value: value || '', errormessage: errorMessage, ref: elem => scrollToView(forceScroll, elem) }));
+    case 'CHECKBOX':
+      return index.h("div", { class: "col col--sd-12 col--tb-3 padding--small" },
+        index.h("ez-check", { onInput: evt => changeFieldHandler(evt.target['value']), ref: elem => scrollToView(forceScroll, elem) }));
+    case 'SWITCH':
+      return index.h("div", { class: "col col--sd-12 col--tb-3 padding--small" },
+        index.h("div", { class: "row" },
+          index.h("div", { class: "col col--sd-2" },
+            index.h("ez-check", { mode: "switch", value: value === "S", ref: elem => scrollToView(forceScroll, elem) })),
+          index.h("div", { class: "col col--sd-10" },
+            index.h("label", { class: "text text--primary text--medium" }, label))));
+    case 'OPTIONSELECTOR':
+      const optsObj = JSON.parse(properties.find(prop => prop.name === 'options').value);
+      return index.h("div", { class: "col col--sd-12 col--tb-3 padding--small" },
+        index.h("ez-combo-box", { value: value, label: formattedLabel, onEzChange: (event) => changeFieldHandler(event.target['value']), errormessage: errorMessage, ref: elem => scrollToView(forceScroll, elem) }, Object.keys(optsObj).map(key => index.h("option", { value: key }, optsObj[key]))));
+    case 'SEARCH':
+      const context = {};
+      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 index.h("div", { class: "col col--sd-12 col--tb-3 padding--small" },
+        index.h("ez-search", { label: label, onEzChange: (event) => changeFieldHandler(event.target['value']), showvalue: true, value: value, loadexecutor: (argument, callback) => dataUnit.fieldSearchExecutor(argument, context, callback) }));
+    case 'DATE':
+      return index.h("div", { class: "col col--sd-12 col--tb-3 padding--small" },
+        index.h("ez-date-input", { label: formattedLabel, enabled: true, value: !value ? null : DateUtils.clearTime(value), onEzChange: (event) => changeFieldHandler(event.target['value']), errormessage: errorMessage, ref: elem => scrollToView(forceScroll, elem) }));
+    //IMAGE, FILE, DATE, DATETIME, ELAPSEDTIME, DECIMALNUMBER, INTEGERNUMBER, PASSWORD, MASKEDTEXT, HTML
+    default:
+      return index.h("div", { class: "col col--sd-12 col--tb-3 padding--small" }, loadingData
+        ?
+          index.h("place-holder", null)
+        :
+          index.h("ez-text-input", { loading: loadingData, label: formattedLabel, onInput: (event) => changeFieldHandler(event.target['value']), value: value, errormessage: errorMessage, ref: elem => scrollToView(forceScroll, elem) }));
+  }
 };
 
-const FieldSet = ({ store, formName, source, dataUnit }) => {
-  const { label, fields } = source;
-  const fieldSetName = formName + label;
-  let isCollapsed = DataUnit.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 index.h("div", { class: "col col--sd-12 padding--small" },
-    index.h("div", { class: "row margin-top--large" },
-      index.h("div", { class: "col col--sd-12 align--middle padding-horizontal--medium" },
-        index.h("ez-collapsable-box", { value: isCollapsed, label: label, onEzChange: () => store.dispatch(DataUnit.collapseExpandGroup(fieldSetName, !isCollapsed)) }),
-        isCollapsed ? null :
-          index.h("div", { class: "col col--sd-12" }, fields.map(field => index.h(Field, { source: field, dataUnit: dataUnit, forceScroll: fieldToScroll === field.name }))))));
+const FieldSet = ({ store, formName, source, dataUnit }) => {
+  const { label, fields } = source;
+  const fieldSetName = formName + label;
+  let isCollapsed = DataUnit.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 index.h("div", { class: "col col--sd-12 padding--small" },
+    index.h("div", { class: "row margin-top--large" },
+      index.h("div", { class: "col col--sd-12 align--middle padding-horizontal--medium" },
+        index.h("ez-collapsable-box", { value: isCollapsed, label: label, onEzChange: () => store.dispatch(DataUnit.collapseExpandGroup(fieldSetName, !isCollapsed)) }),
+        isCollapsed ? null :
+          index.h("div", { class: "col col--sd-12" }, fields.map(field => index.h(Field, { source: field, dataUnit: dataUnit, forceScroll: fieldToScroll === field.name }))))));
 };
 
-function buildFormItem(source, formName, store, dataUnit) {
-  if ("fields" in source) {
-    return index.h(FieldSet, { source: source, store: store, formName: formName, dataUnit: dataUnit });
-  }
-  const errorMsg = dataUnit.getErrorMessage(source.name);
-  const forceScroll = errorMsg === undefined || errorMsg === null || errorMsg === "" ? false : true;
-  return index.h(Field, { source: source, dataUnit: dataUnit, forceScroll: forceScroll });
-}
-const FormSheet = ({ store, parentName, source, parentDataUnit, dataUnitBuilder }) => {
-  const selectedTab = DataUnit.selectCurrentTab(store.getState(), parentName);
-  const tabs = source.length > 1 ? source.map(form => index.h("ez-tab", { label: form.label, tabKey: form.name })) : null;
-  const { subForms, items, name } = source[selectedTab];
-  const dataUnit = dataUnitBuilder(source[selectedTab].dataUnit);
-  source[selectedTab].dataUnit = dataUnit;
-  const hasSubForms = subForms && subForms.length > 0;
-  const changeTabHandler = (index) => {
-    store.dispatch(DataUnit.changeTab(parentName, index));
-  };
-  //todos os campos e subformulários precisam estar ligados a um DU
-  const currentDU = dataUnit || parentDataUnit;
-  return index.h("div", { class: "form-sheet" },
-    tabs ? index.h("ez-tabselector", { selectedindex: selectedTab, selectedtab: name, onChange: (evt) => changeTabHandler(evt.target.selectedindex) }, tabs) : null,
-    dataUnit ? index.h(NavigationBar, { dataUnit: dataUnit }) : null,
-    index.h("div", { class: "tab__container" },
-      items ? items.map(item => buildFormItem(item, name, store, currentDU)) : null,
-      hasSubForms ? index.h(FormSheet, { store: store, source: subForms, parentName: name, parentDataUnit: currentDU, dataUnitBuilder: dataUnitBuilder }) : null));
+function buildFormItem(source, formName, store, dataUnit) {
+  if ("fields" in source) {
+    return index.h(FieldSet, { source: source, store: store, formName: formName, dataUnit: dataUnit });
+  }
+  const errorMsg = dataUnit.getErrorMessage(source.name);
+  const forceScroll = errorMsg === undefined || errorMsg === null || errorMsg === "" ? false : true;
+  return index.h(Field, { source: source, dataUnit: dataUnit, forceScroll: forceScroll });
+}
+const FormSheet = ({ store, parentName, source, parentDataUnit, dataUnitBuilder }) => {
+  const selectedTab = DataUnit.selectCurrentTab(store.getState(), parentName);
+  const tabs = source.length > 1 ? source.map(form => index.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(DataUnit.changeTab(parentName, index));
+  };
+  //todos os campos e subformulários precisam estar ligados a um DU
+  const currentDU = dataUnit || parentDataUnit;
+  let buttons = DataUnit.selectVisibleButtons(store.getState());
+  if (currentDU.cardinality === "1") {
+    buttons.addVisible = false;
+    buttons.removeVisible = false;
+    buttons.nextVisible = false;
+    buttons.previousVisible = false;
+  }
+  return index.h("div", { class: "form-sheet" },
+    tabs ? index.h("ez-tabselector", { selectedindex: selectedTab, selectedtab: name, onChange: (evt) => changeTabHandler(evt.target.selectedindex) }, tabs) : null,
+    dataUnit ? index.h(NavigationBar, { dataUnit: dataUnit, buttonProps: buttons }) : null,
+    index.h("div", { class: "tab__container" },
+      items ? items.map(item => buildFormItem(item, name, store, currentDU)) : null,
+      hasSubForms ? index.h(FormSheet, { 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}";
 
-const EzForm = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this._requiredFieldsByDU = {};
-  }
-  validateRecords(dataUnit, records) {
-    const result = { isValid: true, message: '' };
-    const reqFields = this._requiredFieldsByDU[dataUnit.name];
-    records.forEach(record => {
-      reqFields.forEach(field => {
-        const recordIndex = record["record__index"];
-        const fieldName = field.name;
-        const fieldValue = record[fieldName];
-        if (fieldValue === null || fieldValue === undefined || fieldValue === '') {
-          this._store.dispatch(DataUnit.invalidField(field.tabControler, field.tabIndex, dataUnit.name, recordIndex, record.record__id, field.name, "Essa informação é obrigatória"));
-          result.isValid = false;
-        }
-      });
-    });
-    if (!result.isValid) {
-      result.message = "Há pelo menos um campo obrigatório não preenchido.";
-    }
-    return result;
-  }
-  componentWillRender() {
-    if (this._store === undefined) {
-      const rootReducer = combineReducers({
-        "hist": undoable(formReducer),
-        "nonhist": formNonHistoricReducer
-      });
-      this._store = createStore(rootReducer, applyMiddleware(thunk));
-      this._store.subscribe(() => { index.forceUpdate(this); });
-    }
-  }
-  loadMDFromExecutor(callBack) {
-    if (this._loadMetadataFunction) {
-      const result = this._loadMetadataFunction();
-      if (result) {
-        if (result instanceof Promise) {
-          result.then(md => {
-            callBack(md);
-          });
-        }
-        else {
-          callBack(result);
-        }
-      }
-    }
-  }
-  loadMDFromElement(callBack) {
-    const metadata = [];
-    Array.from(this._host.children).forEach(elem => {
-      if (elem.tagName === "FORM-METADATA") {
-        const formMetadata = elem;
-        metadata.push(formMetadata.metadata);
-      }
-    });
-    callBack(metadata.length > 0 ? metadata : null);
-  }
-  updateMetadata(metadata) {
-    if (metadata) {
-      const processFields = (duName, form, tabController, tabIndex) => {
-        var _a;
-        let requiredFields = this._requiredFieldsByDU[duName];
-        if (requiredFields === undefined) {
-          requiredFields = [];
-          this._requiredFieldsByDU[duName] = requiredFields;
-        }
-        form.items.forEach(item => {
-          if ("fields" in item) {
-            const fSet = item;
-            fSet.fields.forEach(f => {
-              f.tabControler = tabController;
-              f.tabIndex = tabIndex;
-              if (f.required) {
-                requiredFields.push(f);
-              }
-            });
-          }
-          else {
-            const f = item;
-            f.tabControler = tabController;
-            f.tabIndex = tabIndex;
-            if (f.required) {
-              requiredFields.push(f);
-            }
-          }
-        });
-        (_a = form.subForms) === null || _a === void 0 ? void 0 : _a.forEach((subForm, index) => {
-          const subDU = subForm.dataUnit ? subForm.dataUnit.name : duName;
-          processFields(subDU, subForm, form.name, index);
-        });
-      };
-      this.metadata = metadata;
-      metadata.map((form, index) => {
-        processFields(form.dataUnit.name, form, "__MAIN__FORM__", index);
-      });
-      this._store.dispatch(DataUnit.formLoad());
-    }
-  }
-  parseExecutor(executor) {
-    if (executor) {
-      return executor instanceof Function ? executor : eval(executor);
-    }
-    return null;
-  }
-  componentDidLoad() {
-    this._loadMetadataFunction = this.parseExecutor(this.metadataexecutor);
-    this._loadDataFunction = this.parseExecutor(this.loadexecutor);
-    this._saveFunction = this.parseExecutor(this.saveexecutor);
-    this._removeFunction = this.parseExecutor(this.removeexecutor);
-    this._fieldSearchFunction = this.parseExecutor(this.fieldsearchexecutor);
-    if (this.metadata) {
-      this.updateMetadata(this.metadata);
-    }
-    else {
-      this.loadMDFromElement((md) => this.updateMetadata(md));
-      if (!this.metadata) {
-        this.loadMDFromExecutor((md) => this.updateMetadata(md));
-      }
-    }
-  }
-  buildDataUnit(dataUnit) {
-    if (dataUnit) {
-      const { name, records, cardinality } = dataUnit;
-      if (!(dataUnit instanceof DataUnit.DataUnit)) {
-        dataUnit = new DataUnit.DataUnit(name, cardinality);
-        if (records) {
-          dataUnit.records = records;
-        }
-        dataUnit.store = this._store;
-        dataUnit.loadExecutor = this._loadDataFunction;
-        dataUnit.saveExecutor = this._saveFunction;
-        dataUnit.removeExecutor = this._removeFunction;
-        dataUnit.recordsValidator = this;
-        dataUnit.fieldSearchExecutor = this._fieldSearchFunction;
-      }
-    }
-    return dataUnit;
-  }
-  render() {
-    return this.metadata ? index.h(FormSheet, { store: this._store, source: this.metadata, parentName: "__MAIN__FORM__", dataUnitBuilder: (du) => this.buildDataUnit(du) }) : null;
-  }
-  get _host() { return index.getElement(this); }
-};
+const EzForm = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this._dataUnits = new Map();
+    this._duSources = new Map();
+    this._requiredFieldsByDU = {};
+  }
+  async validate() {
+    for (let i = 0; i < this._duSources.size; i++) {
+      const duName = Array.from(this._duSources.keys())[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 = [];
+    for (let i = 0; i < this._dataUnits.size; i++) {
+      const du = Array.from(this._dataUnits.values())[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;
+  }
+  validateRecords(dataUnit, records) {
+    const result = { isValid: true, message: '' };
+    const reqFields = this._requiredFieldsByDU[dataUnit.name];
+    const recordValidator = record => {
+      reqFields.forEach(field => {
+        const recordIndex = record["record__index"];
+        const fieldName = field.name;
+        const fieldValue = record[fieldName];
+        if (fieldValue === null || fieldValue === undefined || fieldValue === '') {
+          this._store.dispatch(DataUnit.invalidField(field.tabControler, field.tabIndex, 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 (records.length == 0) {
+      recordValidator({});
+    }
+    else {
+      records.forEach(recordValidator);
+    }
+    return result;
+  }
+  componentWillRender() {
+    if (this._store === undefined) {
+      const rootReducer = combineReducers({
+        "hist": undoable(formReducer),
+        "nonhist": formNonHistoricReducer
+      });
+      this._store = createStore(rootReducer, applyMiddleware(thunk));
+      this._store.subscribe(() => { index.forceUpdate(this); });
+      if (this.slavemode) {
+        this._store.dispatch(DataUnit.showHideNavigationButtons("saveVisible", false));
+        this._store.dispatch(DataUnit.showHideNavigationButtons("cancelVisible", false));
+        this._store.dispatch(DataUnit.showHideNavigationButtons("reloadVisible", false));
+      }
+    }
+  }
+  loadMDFromExecutor(callBack) {
+    const loadMetadataFunction = this.parseExecutor(this.metadataexecutor);
+    if (loadMetadataFunction) {
+      const result = loadMetadataFunction();
+      if (result) {
+        if (result instanceof Promise) {
+          result.then(md => {
+            callBack(md);
+          });
+        }
+        else {
+          callBack(result);
+        }
+      }
+    }
+  }
+  loadMDFromElement(callBack) {
+    const metadata = [];
+    Array.from(this._host.children).forEach(elem => {
+      if (elem.tagName === "FORM-METADATA") {
+        const formMetadata = elem;
+        metadata.push(formMetadata.metadata);
+      }
+    });
+    callBack(metadata.length > 0 ? metadata : null);
+  }
+  updateMetadata(metadata) {
+    if (metadata) {
+      const processFields = (duName, form, tabController, tabIndex) => {
+        var _a;
+        let requiredFields = this._requiredFieldsByDU[duName];
+        if (requiredFields === undefined) {
+          requiredFields = [];
+          this._requiredFieldsByDU[duName] = requiredFields;
+        }
+        form.items.forEach(item => {
+          if ("fields" in item) {
+            const fSet = item;
+            fSet.fields.forEach(f => {
+              f.tabControler = tabController;
+              f.tabIndex = tabIndex;
+              if (f.required) {
+                requiredFields.push(f);
+              }
+            });
+          }
+          else {
+            const f = item;
+            f.tabControler = tabController;
+            f.tabIndex = tabIndex;
+            if (f.required) {
+              requiredFields.push(f);
+            }
+          }
+        });
+        (_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.metadata = metadata;
+      metadata.map((form, index) => {
+        const du = form.dataUnit;
+        const duName = du.name;
+        this._duSources.set(duName, du);
+        processFields(duName, form, "__MAIN__FORM__", index);
+      });
+      this._store.dispatch(DataUnit.formLoad());
+    }
+  }
+  parseExecutor(executor) {
+    if (executor) {
+      return executor instanceof Function ? executor : eval(executor);
+    }
+    return null;
+  }
+  componentDidLoad() {
+    if (this.metadata) {
+      this.updateMetadata(this.metadata);
+    }
+    else {
+      this.loadMDFromElement((md) => this.updateMetadata(md));
+      if (!this.metadata) {
+        this.loadMDFromExecutor((md) => this.updateMetadata(md));
+      }
+    }
+  }
+  buildDataUnit(dataUnit, parentDataUnit) {
+    if (dataUnit) {
+      const { name, unitLabel, records, cardinality } = dataUnit;
+      if (!(dataUnit instanceof DataUnit.DataUnit)) {
+        let parent;
+        if (parentDataUnit instanceof DataUnit.DataUnit) {
+          parent = parentDataUnit;
+        }
+        else {
+          parent = this._dataUnits.get(parentDataUnit);
+        }
+        dataUnit = new DataUnit.DataUnit(name, unitLabel, cardinality, parent);
+        this._dataUnits.set(dataUnit.name, dataUnit);
+        if (records) {
+          dataUnit.records = records;
+        }
+        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;
+        dataUnit.fieldSearchExecutor = this.parseExecutor(this.fieldsearchexecutor);
+      }
+    }
+    return dataUnit;
+  }
+  render() {
+    return this.metadata ? index.h(FormSheet, { store: this._store, source: this.metadata, parentName: "__MAIN__FORM__", dataUnitBuilder: (du, parentDataUnit) => this.buildDataUnit(du, parentDataUnit) }) : null;
+  }
+  get _host() { return index.getElement(this); }
+};
 EzForm.style = ezFormCss;
 
 const ezIconCss = ":host{display:block;overflow:hidden;position:relative}svg{display:flex;justify-content:center;align-items:center;fill:var(--color--icon)}.x-small{width:12px;height:12px}.small{width:16px;height:16px}.medium{width:20px;height:20px}.large{width:24px;height:24px}.x-large{width:30px;height:30px}";
 
-const EzIcon = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    /*Tamanho do icone*/
-    this.size = 'medium';
-  }
-  render() {
-    return (index.h("svg", { class: this.size, role: "img" }, index.h("use", { xlinkHref: this.href })));
-  }
-};
+const EzIcon = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    /*Tamanho do icone*/
+    this.size = 'medium';
+  }
+  render() {
+    return (index.h("svg", { class: this.size, role: "img" }, index.h("use", { xlinkHref: this.href })));
+  }
+};
 EzIcon.style = ezIconCss;
 
 const ezPopoverCss = ":host{--pop__box--border-radius:var(--border--radius-medium, 12px);--pop__box--box-shadow:var(--shadow, 0px 0px 16px 0px #000);position:relative;display:flex;user-select:none;width:100%}.box{z-index:var(--more-visible, 1);display:flex;flex-direction:column;height:fit-content;background-color:transparent;border-radius:var(--pop__box--border-radius);box-shadow:var(--pop__box--box-shadow)}.box--fit-content{width:fit-content}.box--full-width{width:100%}";
 
-const EzPopover = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this._firstRender = true;
-    /**
-     * No modo floating = false o popover só se tornará visível
-     * quando o método show() for acionado.
-     */
-    this.autoclose = true;
-    /**
-     * Offset top do popover em relação ao componente pai
-     */
-    this.top = '0px';
-    /**
-     * Offset left do popover em relação ao componente pai
-     */
-    this.left = '0px';
-    /**
-     * Offset bottom do popover em relação ao componente pai
-     */
-    this.bottom = '0px';
-    /**
-     * Offset right do popover em relação ao componente pai
-     */
-    this.right = '0px';
-    /**
-     * Ajusta o comportamento da largura do popover.
-     * Opções: "100% e "fit-content" (default)
-     */
-    this.boxwidth = 'fit-content';
-  }
-  /**
-   * Atualiza a posição do popover em relação ao componente pai.
-   */
-  async updatePosition(top = this.top, left = this.left, bottom = this.bottom, right = this.right) {
-    const floatingOptions = {
-      autoClose: this.autoclose,
-      top,
-      left,
-      bottom,
-      right,
-      innerClickTest: (_container, node) => {
-        if (_container.contains(node)) {
-          return true;
-        }
-        if (_container.shadowRoot && _container.shadowRoot.contains(node)) {
-          return true;
-        }
-        //Here: we pass this._box as parameter but we need to change to _host 
-        //because we need to get the lasChild (inner content to put in slot)
-        _container = this._host;
-        return !_container.lastElementChild.shadowRoot ? _container.contains(node) : _container.lastElementChild.shadowRoot.contains(node);
-      }
-    };
-    FloatingManager.updateFloatPosition(this._box, this._container, floatingOptions);
-  }
-  /**
-   * Faz com que o popover seja renderizado na DOM.
-   *
-   */
-  async show(top = this.top, left = this.left, bottom = this.bottom, right = this.right) {
-    const floatingOptions = {
-      autoClose: this.autoclose,
-      top,
-      left,
-      bottom,
-      right,
-      innerClickTest: (_container, node) => {
-        if (_container.contains(node)) {
-          return true;
-        }
-        if (_container.shadowRoot && _container.shadowRoot.contains(node)) {
-          return true;
-        }
-        // Here: we pass this._box as parameter but we need to change to _host 
-        // because we need to get the lasChild (inner content to put in slot)
-        _container = this._host;
-        return !_container.lastElementChild.shadowRoot ? _container.contains(node) : _container.lastElementChild.shadowRoot.contains(node);
-      }
-    };
-    this._floatingID = FloatingManager.float(this._box, this._container, floatingOptions);
-    this.isOpened = true;
-  }
-  /**
-   * Usado no modo floating. Faz com que o componente seja ocultado.
-   */
-  async hide() {
-    if (this._floatingID !== undefined) {
-      FloatingManager.close(this._floatingID);
-      this._floatingID = undefined;
-      this.isOpened = false;
-    }
-  }
-  componentDidRender() {
-    if (this._firstRender) {
-      this._box.remove();
-      this._firstRender = false;
-    }
-  }
-  render() {
-    return (index.h(index.Host, null, index.h("section", { ref: el => this._container = el }, index.h("div", { class: `box ${this.boxwidth === 'fit-content' ? 'box--fit-content' : 'box--full-width'}`, ref: el => this._box = el }, index.h("slot", null)))));
-  }
-  get _host() { return index.getElement(this); }
-};
+const EzPopover = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this._firstRender = true;
+    /**
+     * No modo floating = false o popover só se tornará visível
+     * quando o método show() for acionado.
+     */
+    this.autoclose = true;
+    /**
+     * Offset top do popover em relação ao componente pai
+     */
+    this.top = '0px';
+    /**
+     * Offset left do popover em relação ao componente pai
+     */
+    this.left = '0px';
+    /**
+     * Offset bottom do popover em relação ao componente pai
+     */
+    this.bottom = '0px';
+    /**
+     * Offset right do popover em relação ao componente pai
+     */
+    this.right = '0px';
+    /**
+     * Ajusta o comportamento da largura do popover.
+     * Opções: "100% e "fit-content" (default)
+     */
+    this.boxwidth = 'fit-content';
+  }
+  /**
+   * Atualiza a posição do popover em relação ao componente pai.
+   */
+  async updatePosition(top = this.top, left = this.left, bottom = this.bottom, right = this.right) {
+    const floatingOptions = {
+      autoClose: this.autoclose,
+      top,
+      left,
+      bottom,
+      right,
+      innerClickTest: (_container, node) => {
+        if (_container.contains(node)) {
+          return true;
+        }
+        if (_container.shadowRoot && _container.shadowRoot.contains(node)) {
+          return true;
+        }
+        //Here: we pass this._box as parameter but we need to change to _host 
+        //because we need to get the lasChild (inner content to put in slot)
+        _container = this._host;
+        return !_container.lastElementChild.shadowRoot ? _container.contains(node) : _container.lastElementChild.shadowRoot.contains(node);
+      }
+    };
+    FloatingManager.updateFloatPosition(this._box, this._container, floatingOptions);
+  }
+  /**
+   * Faz com que o popover seja renderizado na DOM.
+   *
+   */
+  async show(top = this.top, left = this.left, bottom = this.bottom, right = this.right) {
+    const floatingOptions = {
+      autoClose: this.autoclose,
+      top,
+      left,
+      bottom,
+      right,
+      innerClickTest: (_container, node) => {
+        if (_container.contains(node)) {
+          return true;
+        }
+        if (_container.shadowRoot && _container.shadowRoot.contains(node)) {
+          return true;
+        }
+        // Here: we pass this._box as parameter but we need to change to _host 
+        // because we need to get the lasChild (inner content to put in slot)
+        _container = this._host;
+        return !_container.lastElementChild.shadowRoot ? _container.contains(node) : _container.lastElementChild.shadowRoot.contains(node);
+      }
+    };
+    this._floatingID = FloatingManager.float(this._box, this._container, floatingOptions);
+    this.isOpened = true;
+  }
+  /**
+   * Usado no modo floating. Faz com que o componente seja ocultado.
+   */
+  async hide() {
+    if (this._floatingID !== undefined) {
+      FloatingManager.close(this._floatingID);
+      this._floatingID = undefined;
+      this.isOpened = false;
+    }
+  }
+  componentDidRender() {
+    if (this._firstRender) {
+      this._box.remove();
+      this._firstRender = false;
+    }
+  }
+  render() {
+    return (index.h(index.Host, null, index.h("section", { ref: el => this._container = el }, index.h("div", { class: `box ${this.boxwidth === 'fit-content' ? 'box--fit-content' : 'box--full-width'}`, ref: el => this._box = el }, index.h("slot", null)))));
+  }
+  get _host() { return index.getElement(this); }
+};
 EzPopover.style = ezPopoverCss;
 
 const ezSearchCss = ":host{--srch--height:42px;--srch--width:100%;--srch__icon--width:48px;--srch--border-radius:var(--border--radius-medium, 12px);--srch--border-radius-small:var(--border--radius-small, 6px);--srch--font-size:var(--text--medium, 14px);--srch--font-family:var(--font-pattern, Arial);--srch--font-weight--large:var(--text-weight--large, 500);--srch--font-weight--medium:var(--text-weight--medium, 400);--srch--space--medium:var(--space--medium, 12px);--srch--space--small:var(--space--small, 6px);--srch--shadow:var(--shadow, 0px 0px 16px 0px rgba(0, 38, 111, .12));--srch--background-color--xlight:var(--background--xlight,#fff);--srch__list-z-index:var(--more-visible, 1);--srch__input--background-color:var(--background--medium, #e0e0e0);--srch__input--border:var(--border--medium, 2px solid);--srch__input--border-color:var(--srch__input--background-color);--srch__input--focus--border-color:var(--color--primary, #008561);--srch__input--disabled--background-color:var(--color--disable-secondary, #F2F5F8);--srch__input--disabled--color:var(--text--disable, #AFB6C0);--srch__input--error--border-color:#CC2936;--srch__label--color:var(--title--primary, #919191);--srch__message_box--font-size:var(--text--small, 12px);--srch__message_box--info--color:var(--color--success, #22085d);--srch__message_box--error--color:var(--color--error, #FF0000);--srch__list-text--primary:var(--text--primary,#626e82);--srch__list-text--secondary:var(--text--secondary,#a2abb9);--srch__list-height:calc(4px + var(--srch--font-size) + var(--srch--space--medium));display:flex;flex-wrap:wrap;position:relative;width:var(--srch--width)}ez-text-input{--it__input--background-color:var(--srch__input--background-color, #FFFFFF);--it__input--border-color:var(--srch__input--border-color, #DCE0E8)}input{width:100%;box-sizing:border-box;padding:var(--space--medium);height:var(--srch--height);border-radius:var(--srch--border-radius);font-family:var(--srch--font-family);font-size:var(--srch--font-size);border:var(--srch__input--border);border-color:var(--srch__input--border-color);background-color:var(--srch__input--background-color);font-weight:var(--text-weight--large)}input:disabled{background-color:var(--srch__input--disabled--background-color);color:var(--srch__input--disabled--color)}input:focus{outline:none;border-color:var(--srch__input--focus--border-color)}input.icon--left{padding-left:var(--srch__icon--width)}input.icon--right{padding-right:var(--srch__icon--width)}input::placeholder{color:var(--srch__placeholder--color);font-weight:var(--srch__placeholder--font-weight)}input:disabled::placeholder{color:var(--srch__placeholder--disabled--color)}input.hasError{color:inherit;border-color:var(--srch__input--error--border-color)}input.text--right{text-align:right}ez-text-input{--it__input--background-color:var(--srch__input--background-color, #FFFFFF);--it__input--border-color:var(--srch__input--border-color, #DCE0E8)}.message-box{min-height:0;min-width:100%;margin-top:2px;line-height:12px;font-family:var(--srch--font-family);font-size:var(--srch__message_box--font-size);color:var(--srch__message_box--info--color)}.hasError{min-height:16px;color:var(--srch__message_box--error--color)}.input__label{font-size:var(--text--medium);font-weight:var(--text-weight--large);left:var(--space--medium);position:absolute;color:var(--title--primary);top:var(--space--medium);font-family:var(--srch--font-family);-webkit-transition:font-size .3s, top .3s;transition:font-size .3s, top .3s;z-index:var(--visible)}.input__label--floated{font-family:var(--srch--font-family);font-size:var(--text--extra-small);top:var(--space--small);color:var(--text--primary)}.input__label--left{left:var(--srch__icon--width)}.input--with--label{padding-bottom:0}.message-box{min-height:16px;min-width:100%;margin-top:2px;line-height:12px;font-family:var(--srch--font-family);font-size:var(--srch__message_box--font-size);color:var(--srch__message_box--info--color)}.hasError{color:var(--srch__message_box--error--color)}.list-container{z-index:var(--srch__list-z-index);padding:var(--srch--space--small);background:var(--srch--background-color--xlight);border-radius:var(--srch--border-radius);width:100%;overflow:auto;box-sizing:border-box;max-height:calc(4*var(--srch__list-height) + 2*var(--srch--space--small))}li{list-style-type:none;border-radius:var(--srch--border-radius-small);padding:0 var(--srch--space--small);display:flex;justify-content:space-between;align-items:center}li:hover{background-color:var(--background--medium)}.--li__spanlabel{color:var(--srch__list-text--primary);border-radius:var(--srch--border-radius-small);padding:0 var(--srch--space--small);height:var(--srch__list-height);font-weight:var(--srch--font-weight--large);font-family:var(--srch--font-family);line-height:var(--srch__list-height);vertical-align:middle;text-overflow:ellipsis;width:80%;min-width:30px;overflow-x:hidden;text-align:left}.--li__spanlabel--full-width{color:var(--srch__list-text--primary);border-radius:var(--srch--border-radius-small);padding:0 var(--srch--space--small);height:var(--srch__list-height);font-weight:var(--srch--font-weight--large);font-family:var(--srch--font-family);line-height:var(--srch__list-height);vertical-align:middle;text-overflow:ellipsis;width:100%;min-width:30px;overflow-x:hidden;text-align:left}.--li__spanvalue{color:var(--srch__list-text--secondary);border-radius:var(--srch--border-radius-small);padding:0 var(--srch--space--small);height:var(--srch__list-height);font-weight:var(--srch--font-weight--medium);font-family:var(--srch--font-family);line-height:var(--srch__list-height);vertical-align:middle;text-overflow:ellipsis;width:20%;min-width:20px;overflow-x:hidden;text-align:right}.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(--text--primary, #008561);width:22px;height:22px;clip-path:path(\"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\")}.btn-open-search:disabled:after{background-color:var(--text--disable, #AFB6C0)}.btn-open-search:enabled:hover::after{background-color:var(--color--primary, #4e4e4e)}.--li--preselected{background-color:var(--background--strong)}";
 
-const EzSearch = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.ezChange = index.createEvent(this, "ezChange", 7);
-    this._options = [];
-    this._classSelect = 'list-container--4row';
-    /**
-     * Deixa o campo disponível ou não para digitação.
-     */
-    this.enabled = true;
-    /**
-    * Quantidade máxima de itens guardados no localstorage
-    */
-    this.qtdHotItems = 6;
-    /**
-       * Ajusta a opção de mostrar o "value" para cada "label". Como default "value" não está presente (showvalue = false)
-       */
-    this.showvalue = false;
-    ///// HOTSEARCH /////
-    this.buildId = () => {
-      return btoa(`${this.hotsearchid}:${location.pathname}`);
-    };
-    this.getStorageItems = (key) => {
-      let storageValueStr = localStorage.getItem('hotSearch-ez-search:' + key);
-      let storageItems = [];
-      if (storageValueStr !== null) {
-        storageItems = JSON.parse(storageValueStr);
-      }
-      return storageItems;
-    };
-    this.orderHotList = (list) => {
-      return list.sort((a, b) => {
-        let time1 = new Date(a.dtRecent).getTime();
-        let time2 = new Date(b.dtRecent).getTime();
-        let qtd1 = a.qtd;
-        let qtd2 = b.qtd;
-        if (time1 < time2)
-          return -1;
-        if (time1 > time2)
-          return 1;
-        if (qtd1 > qtd2)
-          return -1;
-        if (qtd1 < qtd2)
-          return 1;
-        return 0;
-      });
-    };
-    this.saveStorageItem = (key, value) => {
-      if (value == '' || value == undefined)
-        return;
-      let storageItem = this.getStorageItems(key);
-      let element = this.getElement(storageItem, value);
-      if (element) {
-        element.qtd++;
-        element.dtRecent = this.getOnlyDate();
-      }
-      else {
-        if (storageItem.length >= this.qtdHotItems) {
-          storageItem = this.orderHotList(storageItem);
-          storageItem.splice(-1, 1);
-        }
-        storageItem.push({
-          description: value,
-          qtd: 1,
-          dtRecent: this.getOnlyDate()
-        });
-      }
-      localStorage.setItem('hotSearch-ez-search:' + key, JSON.stringify(storageItem));
-      return storageItem;
-    };
-    this.adjustOptions = (arrayOptions) => {
-      let optionsTemp = [];
-      arrayOptions.map(el => {
-        optionsTemp.push({
-          value: el.value,
-          label: el.label,
-          ajustedValue: el.value === null || el.value === undefined || el.value === '' ? el.label : el.value,
-        });
-      });
-      return optionsTemp;
-    };
-    this.sortArrayOptions = (array, propname) => {
-      const sortedArray = array.sort(function (a, b) {
-        if (a[propname] < b[propname]) {
-          return -1;
-        }
-        if (a[propname] > b[propname]) {
-          return 1;
-        }
-        return 0;
-      });
-      return sortedArray;
-    };
-  }
-  valueChanged() {
-    var _a;
-    if (this.value) {
-      this.ezChange.emit({ value: this.value, label: (_a = this._inputElem) === null || _a === void 0 ? void 0 : _a.value });
-      let key = this.buildId();
-      this.saveStorageItem(key, this.value);
-    }
-  }
-  //ajustar ao fim do teste
-  onInputTeste() {
-    if (this._inputElem) {
-      this.handleChange();
-    }
-  }
-  getElement(storageItem, value) {
-    return storageItem.find(e => e.description === value);
-  }
-  getOnlyDate() {
-    let dt = new Date();
-    dt.setHours(0);
-    dt.setMinutes(0);
-    dt.setSeconds(0);
-    dt.setUTCMilliseconds(0);
-    return dt.toString();
-  }
-  onInputChange(ev) {
-    const el = ev.target;
-    let key = this.buildId();
-    this.saveStorageItem(key, el.value);
-  }
-  buildDataList() {
-    try {
-      if (this.hotsearchid === undefined) {
-        return;
-      }
-      let key = this.buildId();
-      let optionsArray = [];
-      this._options = [];
-      if (this.getStorageItems(key).length > 0) {
-        this.orderHotList(this.getStorageItems(key))
-          .forEach((el) => {
-          optionsArray.push({
-            value: el.description,
-            label: el.description,
-          });
-        });
-        this._options = [{ value: '', label: '' }].concat(optionsArray);
-        this.buildOptions();
-      }
-    }
-    catch (err) {
-      this.errormessage = err;
-    }
-  }
-  ///// EVENT HANDLERS
-  buildItem(opt, index$1) {
-    const className = index$1 === this._preSelection ? "--li--preselected" : "";
-    return index.h("li", { class: className, key: opt.ajustedValue, accessKey: opt.label.toString(), id: 'item_' + opt.ajustedValue, onMouseDown: (ev) => this.handleSetValueByOption(ev) }, this.highlightMatch(opt.label), this.showvalue ? index.h("span", { title: opt.ajustedValue, class: '--li__spanvalue' }, opt.ajustedValue) : null);
-  }
-  highlightMatch(label) {
-    var _a;
-    const spanClassName = this.showvalue ? '--li__spanlabel' : '--li__spanlabel--full-width';
-    if ((_a = this._inputElem) === null || _a === void 0 ? void 0 : _a.value) {
-      const criteriaLength = this._inputElem.value.length;
-      const matchStart = label.toUpperCase().indexOf(this._inputElem.value);
-      if (matchStart > -1) {
-        const strLabelStart = label.substr(0, matchStart);
-        const strLabelEnd = label.substr(matchStart + criteriaLength);
-        const strMatch = label.substr(matchStart, criteriaLength);
-        return (index.h("span", { class: spanClassName }, strLabelStart, index.h("strong", null, strMatch), strLabelEnd));
-      }
-    }
-    return (index.h("span", { class: spanClassName }, label));
-  }
-  showOptions() {
-    if (this.enabled) {
-      const top = this._inputElem.errormessage ? '0px' : '-17px';
-      this._popover.show(top);
-    }
-  }
-  nextOption() {
-    this.showOptions();
-    this._preSelection = this._preSelection === undefined ? 0 : Math.min(this._preSelection + 1, this._visibleOptions.length - 1);
-    this.scrollToOption(this._visibleOptions[this._preSelection]);
-  }
-  previousOption() {
-    this._preSelection = this._preSelection === undefined ? 0 : Math.max(this._preSelection - 1, 0);
-    this.scrollToOption(this._visibleOptions[this._preSelection]);
-  }
-  scrollToOption(opt) {
-    const liElem = this.el.shadowRoot.querySelector(`li#item_${opt.value}`);
-    if (liElem) {
-      const parent = liElem.parentElement;
-      const parentRect = parent.getBoundingClientRect();
-      const itemRect = liElem.getBoundingClientRect();
-      if (itemRect.bottom > parentRect.bottom || itemRect.top < parentRect.top) {
-        liElem.scrollIntoView();
-      }
-    }
-  }
-  selectCurrentOption() {
-    if (this._preSelection !== undefined) {
-      this.selectOption(this._visibleOptions[this._preSelection]);
-      this._preSelection = undefined;
-    }
-  }
-  selectOption(opt) {
-    this._popover.hide();
-    this.value = opt === null || opt === void 0 ? void 0 : opt.ajustedValue;
-    this._inputElem.value = opt.value;
-    //Definir com a equipe de design se vai ser utilizado dessa forma.
-    // this._inputElem.value = opt.value? opt.value + " - "+ opt?.label: '';
-  }
-  keyDownHandler(event) {
-    switch (event.key) {
-      case "ArrowDown":
-        this.nextOption();
-        break;
-      case "ArrowUp":
-        this.previousOption();
-        break;
-      case "Enter":
-        this.selectCurrentOption();
-        break;
-    }
-    event.stopPropagation();
-  }
-  handleSetValueByOption(ev) {
-    this._popover.hide();
-    const spanEl = ev.target;
-    const sourceElement = ev.composedPath()[0];
-    let li;
-    if (sourceElement.tagName === 'SPAN') {
-      li = spanEl.parentNode;
-    }
-    else {
-      li = spanEl.parentNode.parentNode;
-    }
-    this.value = li.id.split('_')[1];
-    this._inputElem.value = li.accessKey;
-    this.ezChange.emit();
-  }
-  handleChange() {
-    if (this._changeDeboucing) {
-      window.clearTimeout(this._changeDeboucing);
-    }
-    this._changeDeboucing = window.setTimeout(() => {
-      var _a, _b;
-      if (((_b = (_a = this._inputElem) === null || _a === void 0 ? void 0 : _a.value) === null || _b === void 0 ? void 0 : _b.length) <= 0) {
-        return;
-      }
-      /* save tip on localStorage */
-      let key = this.buildId();
-      this.saveStorageItem(key, this._inputElem.value);
-      /* load data */
-      if (this.loadexecutor) {
-        this._loadDataFunction(this._inputElem.value, (serverData) => { this.populateOptions(serverData); });
-      }
-    }, 200);
-  }
-  normalizeResult(data) {
-    let options = [];
-    if (data instanceof Array) {
-      options = data;
-    }
-    else {
-      if (data instanceof Object) {
-        for (var key in data) {
-          let newOption = { value: '', label: '' };
-          newOption.value = key;
-          newOption.label = data[key];
-          options.push(newOption);
-        }
-      }
-    }
-    this._options = [{ value: '', label: '' }].concat(options);
-    this.buildOptions();
-  }
-  populateOptions(serverData) {
-    if (serverData instanceof Promise) {
-      serverData.then(this.normalizeResult);
-    }
-    else {
-      this.normalizeResult(serverData);
-    }
-  }
-  buildOptions() {
-    var _a;
-    this._visibleOptions = [];
-    this._visibleOptions = this.adjustOptions(this._options);
-    this._visibleOptions = this.sortArrayOptions(this._visibleOptions, 'label');
-    if (this._visibleOptions.length > 0) {
-      (_a = this._divElem) === null || _a === void 0 ? void 0 : _a.classList.add(this._classSelect);
-      this.showOptions();
-    }
-  }
-  setClassForSpanLabel() {
-    if (!this.showvalue) {
-      return '--li__spanlabel--full-width';
-    }
-    else {
-      return '--li__spanlabel';
-    }
-  }
-  handleFocus() {
-    if (this._inputElem && (!this._inputElem.value || this._inputElem.value.length === 0)) {
-      this.buildDataList();
-    }
-  }
-  parseExecutor(executor) {
-    if (executor) {
-      return executor instanceof Function ? executor : eval(executor);
-    }
-    return null;
-  }
-  componentDidLoad() {
-    if (this.value && this.value.length > 0) {
-      this._inputElem.value = this.value;
-    }
-    this._loadDataFunction = this.parseExecutor(this.loadexecutor);
-  }
-  render() {
-    var _a;
-    return (index.h(index.Host, null, index.h("ez-text-input", { ref: (el) => { this._inputElem = el; }, label: this.label, enabled: this.enabled, onFocus: () => { this.handleFocus(); }, onInput: () => { this.handleChange(); }, onKeyDown: event => this.keyDownHandler(event), errormessage: this.errormessage }, index.h("button", { disabled: !this.enabled, tabindex: -1, class: "btn-open-search", onClick: () => { alert("Esta ação irá abrir o PopUp!"); }, slot: "leftIcon" })), index.h("ez-popover", { boxwidth: '100%', ref: el => this._popover = el }, index.h("div", { class: 'list-container', ref: (el) => this._divElem = el }, (_a = this._visibleOptions) === null || _a === void 0 ? void 0 : _a.map((opt, index) => this.buildItem(opt, index))))));
-  }
-  ;
-  get el() { return index.getElement(this); }
-  static get watchers() { return {
-    "value": ["valueChanged"]
-  }; }
-};
+const EzSearch = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.ezChange = index.createEvent(this, "ezChange", 7);
+    this._options = [];
+    this._classSelect = 'list-container--4row';
+    /**
+     * Deixa o campo disponível ou não para digitação.
+     */
+    this.enabled = true;
+    /**
+    * Quantidade máxima de itens guardados no localstorage
+    */
+    this.qtdHotItems = 6;
+    /**
+       * Ajusta a opção de mostrar o "value" para cada "label". Como default "value" não está presente (showvalue = false)
+       */
+    this.showvalue = false;
+    ///// HOTSEARCH /////
+    this.buildId = () => {
+      return btoa(`${this.hotsearchid}:${location.pathname}`);
+    };
+    this.getStorageItems = (key) => {
+      let storageValueStr = localStorage.getItem('hotSearch-ez-search:' + key);
+      let storageItems = [];
+      if (storageValueStr !== null) {
+        storageItems = JSON.parse(storageValueStr);
+      }
+      return storageItems;
+    };
+    this.orderHotList = (list) => {
+      return list.sort((a, b) => {
+        let time1 = new Date(a.dtRecent).getTime();
+        let time2 = new Date(b.dtRecent).getTime();
+        let qtd1 = a.qtd;
+        let qtd2 = b.qtd;
+        if (time1 < time2)
+          return -1;
+        if (time1 > time2)
+          return 1;
+        if (qtd1 > qtd2)
+          return -1;
+        if (qtd1 < qtd2)
+          return 1;
+        return 0;
+      });
+    };
+    this.saveStorageItem = (key, value) => {
+      if (value == '' || value == undefined)
+        return;
+      let storageItem = this.getStorageItems(key);
+      let element = this.getElement(storageItem, value);
+      if (element) {
+        element.qtd++;
+        element.dtRecent = this.getOnlyDate();
+      }
+      else {
+        if (storageItem.length >= this.qtdHotItems) {
+          storageItem = this.orderHotList(storageItem);
+          storageItem.splice(-1, 1);
+        }
+        storageItem.push({
+          description: value,
+          qtd: 1,
+          dtRecent: this.getOnlyDate()
+        });
+      }
+      localStorage.setItem('hotSearch-ez-search:' + key, JSON.stringify(storageItem));
+      return storageItem;
+    };
+    this.adjustOptions = (arrayOptions) => {
+      let optionsTemp = [];
+      arrayOptions.map(el => {
+        optionsTemp.push({
+          value: el.value,
+          label: el.label,
+          ajustedValue: el.value === null || el.value === undefined || el.value === '' ? el.label : el.value,
+        });
+      });
+      return optionsTemp;
+    };
+    this.sortArrayOptions = (array, propname) => {
+      const sortedArray = array.sort(function (a, b) {
+        if (a[propname] < b[propname]) {
+          return -1;
+        }
+        if (a[propname] > b[propname]) {
+          return 1;
+        }
+        return 0;
+      });
+      return sortedArray;
+    };
+  }
+  valueChanged() {
+    var _a;
+    if (this.value) {
+      this.ezChange.emit({ value: this.value, label: (_a = this._inputElem) === null || _a === void 0 ? void 0 : _a.value });
+      let key = this.buildId();
+      this.saveStorageItem(key, this.value);
+    }
+  }
+  //ajustar ao fim do teste
+  onInputTeste() {
+    if (this._inputElem) {
+      this.handleChange();
+    }
+  }
+  getElement(storageItem, value) {
+    return storageItem.find(e => e.description === value);
+  }
+  getOnlyDate() {
+    let dt = new Date();
+    dt.setHours(0);
+    dt.setMinutes(0);
+    dt.setSeconds(0);
+    dt.setUTCMilliseconds(0);
+    return dt.toString();
+  }
+  onInputChange(ev) {
+    const el = ev.target;
+    let key = this.buildId();
+    this.saveStorageItem(key, el.value);
+  }
+  buildDataList() {
+    try {
+      if (this.hotsearchid === undefined) {
+        return;
+      }
+      let key = this.buildId();
+      let optionsArray = [];
+      this._options = [];
+      if (this.getStorageItems(key).length > 0) {
+        this.orderHotList(this.getStorageItems(key))
+          .forEach((el) => {
+          optionsArray.push({
+            value: el.description,
+            label: el.description,
+          });
+        });
+        this._options = [{ value: '', label: '' }].concat(optionsArray);
+        this.buildOptions();
+      }
+    }
+    catch (err) {
+      this.errormessage = err;
+    }
+  }
+  ///// EVENT HANDLERS
+  buildItem(opt, index$1) {
+    const className = index$1 === this._preSelection ? "--li--preselected" : "";
+    return index.h("li", { class: className, key: opt.ajustedValue, accessKey: opt.label.toString(), id: 'item_' + opt.ajustedValue, onMouseDown: (ev) => this.handleSetValueByOption(ev) }, this.highlightMatch(opt.label), this.showvalue ? index.h("span", { title: opt.ajustedValue, class: '--li__spanvalue' }, opt.ajustedValue) : null);
+  }
+  highlightMatch(label) {
+    var _a;
+    const spanClassName = this.showvalue ? '--li__spanlabel' : '--li__spanlabel--full-width';
+    if ((_a = this._inputElem) === null || _a === void 0 ? void 0 : _a.value) {
+      const criteriaLength = this._inputElem.value.length;
+      const matchStart = label.toUpperCase().indexOf(this._inputElem.value);
+      if (matchStart > -1) {
+        const strLabelStart = label.substr(0, matchStart);
+        const strLabelEnd = label.substr(matchStart + criteriaLength);
+        const strMatch = label.substr(matchStart, criteriaLength);
+        return (index.h("span", { class: spanClassName }, strLabelStart, index.h("strong", null, strMatch), strLabelEnd));
+      }
+    }
+    return (index.h("span", { class: spanClassName }, label));
+  }
+  showOptions() {
+    if (this.enabled) {
+      const top = this._inputElem.errormessage ? '0px' : '-17px';
+      this._popover.show(top);
+    }
+  }
+  nextOption() {
+    this.showOptions();
+    this._preSelection = this._preSelection === undefined ? 0 : Math.min(this._preSelection + 1, this._visibleOptions.length - 1);
+    this.scrollToOption(this._visibleOptions[this._preSelection]);
+  }
+  previousOption() {
+    this._preSelection = this._preSelection === undefined ? 0 : Math.max(this._preSelection - 1, 0);
+    this.scrollToOption(this._visibleOptions[this._preSelection]);
+  }
+  scrollToOption(opt) {
+    const liElem = this.el.shadowRoot.querySelector(`li#item_${opt.value}`);
+    if (liElem) {
+      const parent = liElem.parentElement;
+      const parentRect = parent.getBoundingClientRect();
+      const itemRect = liElem.getBoundingClientRect();
+      if (itemRect.bottom > parentRect.bottom || itemRect.top < parentRect.top) {
+        liElem.scrollIntoView();
+      }
+    }
+  }
+  selectCurrentOption() {
+    if (this._preSelection !== undefined) {
+      this.selectOption(this._visibleOptions[this._preSelection]);
+      this._preSelection = undefined;
+    }
+  }
+  selectOption(opt) {
+    this._popover.hide();
+    this.value = opt === null || opt === void 0 ? void 0 : opt.ajustedValue;
+    this._inputElem.value = opt.value;
+    //Definir com a equipe de design se vai ser utilizado dessa forma.
+    // this._inputElem.value = opt.value? opt.value + " - "+ opt?.label: '';
+  }
+  keyDownHandler(event) {
+    switch (event.key) {
+      case "ArrowDown":
+        this.nextOption();
+        break;
+      case "ArrowUp":
+        this.previousOption();
+        break;
+      case "Enter":
+        this.selectCurrentOption();
+        break;
+    }
+    event.stopPropagation();
+  }
+  handleSetValueByOption(ev) {
+    this._popover.hide();
+    const spanEl = ev.target;
+    const sourceElement = ev.composedPath()[0];
+    let li;
+    if (sourceElement.tagName === 'SPAN') {
+      li = spanEl.parentNode;
+    }
+    else {
+      li = spanEl.parentNode.parentNode;
+    }
+    this.value = li.id.split('_')[1];
+    this._inputElem.value = li.accessKey;
+    this.ezChange.emit();
+  }
+  handleChange() {
+    if (this._changeDeboucing) {
+      window.clearTimeout(this._changeDeboucing);
+    }
+    this._changeDeboucing = window.setTimeout(() => {
+      var _a, _b;
+      if (((_b = (_a = this._inputElem) === null || _a === void 0 ? void 0 : _a.value) === null || _b === void 0 ? void 0 : _b.length) <= 0) {
+        return;
+      }
+      /* save tip on localStorage */
+      let key = this.buildId();
+      this.saveStorageItem(key, this._inputElem.value);
+      /* load data */
+      if (this.loadexecutor) {
+        this._loadDataFunction(this._inputElem.value, (serverData) => { this.populateOptions(serverData); });
+      }
+    }, 200);
+  }
+  normalizeResult(data) {
+    let options = [];
+    if (data instanceof Array) {
+      options = data;
+    }
+    else {
+      if (data instanceof Object) {
+        for (var key in data) {
+          let newOption = { value: '', label: '' };
+          newOption.value = key;
+          newOption.label = data[key];
+          options.push(newOption);
+        }
+      }
+    }
+    this._options = [{ value: '', label: '' }].concat(options);
+    this.buildOptions();
+  }
+  populateOptions(serverData) {
+    if (serverData instanceof Promise) {
+      serverData.then(this.normalizeResult);
+    }
+    else {
+      this.normalizeResult(serverData);
+    }
+  }
+  buildOptions() {
+    var _a;
+    this._visibleOptions = [];
+    this._visibleOptions = this.adjustOptions(this._options);
+    this._visibleOptions = this.sortArrayOptions(this._visibleOptions, 'label');
+    if (this._visibleOptions.length > 0) {
+      (_a = this._divElem) === null || _a === void 0 ? void 0 : _a.classList.add(this._classSelect);
+      this.showOptions();
+    }
+  }
+  setClassForSpanLabel() {
+    if (!this.showvalue) {
+      return '--li__spanlabel--full-width';
+    }
+    else {
+      return '--li__spanlabel';
+    }
+  }
+  handleFocus() {
+    if (this._inputElem && (!this._inputElem.value || this._inputElem.value.length === 0)) {
+      this.buildDataList();
+    }
+  }
+  parseExecutor(executor) {
+    if (executor) {
+      return executor instanceof Function ? executor : eval(executor);
+    }
+    return null;
+  }
+  componentDidLoad() {
+    if (this.value && this.value.length > 0) {
+      this._inputElem.value = this.value;
+    }
+    this._loadDataFunction = this.parseExecutor(this.loadexecutor);
+  }
+  render() {
+    var _a;
+    return (index.h(index.Host, null, index.h("ez-text-input", { ref: (el) => { this._inputElem = el; }, label: this.label, enabled: this.enabled, onFocus: () => { this.handleFocus(); }, onInput: () => { this.handleChange(); }, onKeyDown: event => this.keyDownHandler(event), errormessage: this.errormessage }, index.h("button", { disabled: !this.enabled, tabindex: -1, class: "btn-open-search", onClick: () => { alert("Esta ação irá abrir o PopUp!"); }, slot: "leftIcon" })), index.h("ez-popover", { boxwidth: '100%', ref: el => this._popover = el }, index.h("div", { class: 'list-container', ref: (el) => this._divElem = el }, (_a = this._visibleOptions) === null || _a === void 0 ? void 0 : _a.map((opt, index) => this.buildItem(opt, index))))));
+  }
+  ;
+  get el() { return index.getElement(this); }
+  static get watchers() { return {
+    "value": ["valueChanged"]
+  }; }
+};
 EzSearch.style = ezSearchCss;
 
 const ezTabselectorCss = "@keyframes activate{0%{clip-path:inset(calc(100% - 3px) 50% 0px 50% )}100%{clip-path:inset(calc(100% - 3px) 0px 0px 0px )}}:host{display:flex;position:relative;width:100%;overflow:hidden;margin-bottom:var(--space--large, 24px);--tab__box--box-shadow:var(--shadow, 0px 0px 8px 0px #000)}.scroll{display:flex;width:100%;scroll-behavior:smooth;overflow-x:auto}.scroll.startHidden{-webkit-mask-image:linear-gradient(90deg, transparent 20px, #000 48px)}.scroll.midle{-webkit-mask-image:linear-gradient(90deg, transparent 20px, #000 48px, #000 calc(100% - 48px), transparent calc(100% - 20px))}.scroll.endHidden{-webkit-mask-image:linear-gradient(90deg, #000 calc(100% - 48px), transparent calc(100% - 20px))}.tab{display:flex;border:none;min-width:100px;background-color:unset;cursor:pointer;padding:6px 12px;align-items:center;justify-content:center;color:var(--text--primary, #626e82);font-family:var(--font-pattern, \"Sora, Algerian\");font-size:var(--title--small, 14px)}.tab:focus,.forward-button,.backward-button{outline:none}.is-active{position:relative;color:var(--color--primary, #008561)}.is-active::after{content:\"\";position:absolute;width:100%;height:100%;background-color:var(--color--primary, #008561);clip-path:inset(calc(100% - 3px) 0px 0px 0px );animation:activate 0.25s ease-in-out}.is-focused{border:1px dashed var(--color--primary, #000000c5);}.tab-label{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;text-shadow:var(--text-shadow);margin-bottom:var(--space--extra-small, 3px)}.forward-button,.backward-button{position:absolute;z-index:1;display:flex;box-sizing:border-box;padding:0px;top:0px;right:0px;width:16px;height:100%;border:none;background-color:unset;cursor:pointer;justify-content:center;align-items:center}.backward-button{left:0px}.forward-button::after,.backward-button::after{content:'';display:flex;background-color:var(--text--primary, #008561);width:10px;height:16px;clip-path:path(\"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\")}.backward-button::after{clip-path:path(\"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\")}.forward-button:hover::after,.backward-button:hover::after{background-color:var(--color--primary, #4e4e4e)}.hidden{display:none}.scroll::-webkit-scrollbar{display:none}";
 
-const EzTabselector = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.change = index.createEvent(this, "change", 7);
-    this.setFoucusedParam = (ev) => {
-      if (ev.key === 'Enter') {
-        this.selectedindex = this.foucusedindex;
-        this.foucusedindex = undefined;
-        this.selectedtab = this._processedTabs[this.selectedindex]['tabKey'];
-        this.handleTabClick(this.selectedtab, parseInt(this.selectedindex));
-        ev.preventDefault();
-        this.setFocusedTab(this.selectedindex);
-      }
-      else if (ev.key === 'ArrowLeft' || ev.key === 'ArrowRight') {
-        let operator = undefined;
-        if (ev.key === 'ArrowLeft') {
-          operator = false;
-        }
-        else if (ev.key === 'ArrowRight') {
-          operator = true;
-        }
-        else {
-          return;
-        }
-        if (this.foucusedindex === undefined) {
-          if (operator === false) {
-            this.foucusedindex = this.selectedindex !== undefined ? (parseInt(this.selectedindex) - 1).toString() : undefined;
-          }
-          else {
-            this.foucusedindex = this.selectedindex !== undefined ? (parseInt(this.selectedindex) + 1).toString() : undefined;
-          }
-        }
-        else {
-          if (operator === false) {
-            this.foucusedindex = (parseInt(this.foucusedindex) - 1).toString();
-          }
-          else {
-            this.foucusedindex = (parseInt(this.foucusedindex) + 1).toString();
-          }
-        }
-        if (parseInt(this.foucusedindex) < 0) {
-          this.foucusedindex = '0';
-        }
-        else if (parseInt(this.foucusedindex) > this._processedTabs.length - 1) {
-          this.foucusedindex = (this._processedTabs.length - 1).toString();
-        }
-        this.setFoucusedBtn(true, this.foucusedindex);
-        this.setFocusedTab(this.foucusedindex);
-        this.change.emit();
-      }
-      else if (ev.key === 'Tab' || ev.key === 'Escape') {
-        this.foucusedindex = undefined;
-        this.selectedtab = this._processedTabs[this.selectedindex]['tabKey'];
-        this.handleTabClick(this.selectedtab, parseInt(this.selectedindex));
-        ev.preventDefault();
-        this.setFocusedTab(this.selectedindex);
-      }
-      // this.setFocusedTab();
-    };
-  }
-  handleTabClick(tab, index) {
-    this.selectedindex = index.toString();
-    this.foucusedindex = undefined;
-    this.selectedtab = tab;
-    this.change.emit();
-    this.setFoucusedBtn(false, this.selectedindex);
-  }
-  componentWillRender() {
-    if (!this._processedTabs) {
-      this._processedTabs = [];
-      if (this.tabs) {
-        this.tabs.split(',').forEach((label) => {
-          label = label.trim();
-          this._processedTabs.push(new Tab(label, label));
-        });
-      }
-      this._hostElem.querySelectorAll('ez-tab').forEach((elem) => {
-        const tabKey = elem.getAttribute('tabKey');
-        const label = elem.getAttribute('label');
-        const t = new Tab(label, tabKey);
-        const content = elem.firstChild;
-        if (content) {
-          content.setAttribute('slot', 'tab' + this._processedTabs.length);
-          this._hostElem.appendChild(content);
-        }
-        this._processedTabs.push(t);
-      });
-    }
-  }
-  handleSlotChange(ev) {
-    const slot = ev.target;
-    const content = slot.assignedElements()[0];
-    if (content) {
-      content.style.marginLeft = "6px";
-    }
-  }
-  scrollBackward() {
-    const container = this._scrollContainer;
-    if (container) {
-      container.scrollLeft -= container.clientWidth;
-    }
-  }
-  scrollFoward() {
-    const container = this._scrollContainer;
-    if (container) {
-      let lastTab = null;
-      container.querySelectorAll('.tab').forEach((tab) => {
-        if (tab.getBoundingClientRect().right < container.clientWidth) {
-          lastTab = tab;
-        }
-      });
-      container.scrollLeft = lastTab.offsetLeft + lastTab.offsetWidth;
-    }
-  }
-  componentDidRender() {
-    this.updateScroll();
-  }
-  updateScroll() {
-    const container = this._scrollContainer;
-    if (container) {
-      const { scrollWidth, clientWidth, scrollLeft } = container;
-      const remainingScroll = scrollWidth - clientWidth - Math.ceil(scrollLeft);
-      this._startHidden = container.scrollLeft > 0;
-      this._endHidden = remainingScroll > 0;
-      if (this._startHidden) {
-        this._backwardButton.classList.remove('hidden');
-      }
-      else {
-        this._backwardButton.classList.add('hidden');
-      }
-      if (this._endHidden) {
-        this._forwardButton.classList.remove('hidden');
-      }
-      else {
-        this._forwardButton.classList.add('hidden');
-      }
-      const classNames = ['', 'startHidden', 'endHidden', 'midle'];
-      const currentClass = classNames[Number(this._startHidden) | Number(this._endHidden) << 1];
-      classNames.forEach((name) => {
-        if (name !== currentClass && container.classList.contains(name)) {
-          container.classList.remove(name);
-        }
-      });
-      if (currentClass && !container.classList.contains(currentClass)) {
-        container.classList.add(currentClass);
-      }
-    }
-  }
-  domScrollHandler() {
-    window.clearTimeout(this._scrollCallBack);
-    this._scrollCallBack = window.setTimeout(() => { this.updateScroll(); }, 200);
-  }
-  setFocusedTab(index) {
-    window.clearTimeout(this._scrollCallBackTeste);
-    this._scrollCallBackTeste = window.setTimeout(() => {
-      const tabtoscroll = this._scrollContainer.querySelector(`#tab${index}`);
-      console.log('tabtoscroll => ID', `#tab${this.selectedindex}`);
-      console.log('tabtoscroll', tabtoscroll);
-      tabtoscroll.scrollIntoView();
-    }, 200);
-  }
-  getTextWidth(text) {
-    if (this._textMesurement === undefined) {
-      this._textMesurement = this._hostElem.shadowRoot.ownerDocument.createElement("canvas");
-    }
-    const context = this._textMesurement.getContext("2d");
-    context.font = '14px Sora, Algerian';
-    return Math.min(220, 24 + context.measureText(text).width) + 'px';
-  }
-  ;
-  setFoucusedBtn(visible, paramater) {
-    const tabsButtons = this._scrollContainer.querySelectorAll('.tab');
-    tabsButtons.forEach((el) => {
-      el.classList.remove('is-focused');
-      if (el.id === 'tab' + paramater && visible) {
-        el.classList.add('is-focused');
-      }
-    });
-  }
-  render() {
-    return (index.h(index.Host, null, index.h("button", { class: "backward-button", ref: (el) => this._backwardButton = el, onClick: () => this.scrollBackward() }), index.h("div", { class: "scroll", ref: (el) => this._scrollContainer = el,
-      // onScroll={() => this.domScrollHandler()}
-      onKeyDown: (ev) => this.setFoucusedParam(ev) }, this._processedTabs.map((tab, index$1) => {
-      const labelStyle = { 'min-width': this.getTextWidth(tab.label) };
-      const tabId = "tab" + index$1;
-      const isSelected = index$1 === parseInt(this.selectedindex) || (this.selectedtab && tab.tabKey === this.selectedtab);
-      if (isSelected) {
-        this.selectedtab = tab.tabKey;
-        this.selectedindex = index$1.toString();
-      }
-      return index.h("button", { id: tabId, class: `tab${isSelected ? " is-active" : ""}`, onClick: () => this.handleTabClick(tab.tabKey, index$1), style: labelStyle }, index.h("span", { class: "tab-label", title: tab.label }, tab.label), index.h("slot", { name: tabId, onSlotchange: (ev) => { this.handleSlotChange(ev); } }));
-    })), index.h("button", { class: "forward-button", ref: (el) => this._forwardButton = el, onClick: () => this.scrollFoward() })));
-  }
-  get _hostElem() { return index.getElement(this); }
-};
-class Tab {
-  constructor(label, tabKey) {
-    this.label = label;
-    this.tabKey = tabKey;
-  }
-}
+const EzTabselector = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.change = index.createEvent(this, "change", 7);
+    this.setFoucusedParam = (ev) => {
+      if (ev.key === 'Enter') {
+        this.selectedindex = this.foucusedindex;
+        this.foucusedindex = undefined;
+        this.selectedtab = this._processedTabs[this.selectedindex]['tabKey'];
+        this.handleTabClick(this.selectedtab, parseInt(this.selectedindex));
+        ev.preventDefault();
+        this.setFocusedTab(this.selectedindex);
+      }
+      else if (ev.key === 'ArrowLeft' || ev.key === 'ArrowRight') {
+        let operator = undefined;
+        if (ev.key === 'ArrowLeft') {
+          operator = false;
+        }
+        else if (ev.key === 'ArrowRight') {
+          operator = true;
+        }
+        else {
+          return;
+        }
+        if (this.foucusedindex === undefined) {
+          if (operator === false) {
+            this.foucusedindex = this.selectedindex !== undefined ? (parseInt(this.selectedindex) - 1).toString() : undefined;
+          }
+          else {
+            this.foucusedindex = this.selectedindex !== undefined ? (parseInt(this.selectedindex) + 1).toString() : undefined;
+          }
+        }
+        else {
+          if (operator === false) {
+            this.foucusedindex = (parseInt(this.foucusedindex) - 1).toString();
+          }
+          else {
+            this.foucusedindex = (parseInt(this.foucusedindex) + 1).toString();
+          }
+        }
+        if (parseInt(this.foucusedindex) < 0) {
+          this.foucusedindex = '0';
+        }
+        else if (parseInt(this.foucusedindex) > this._processedTabs.length - 1) {
+          this.foucusedindex = (this._processedTabs.length - 1).toString();
+        }
+        this.setFoucusedBtn(true, this.foucusedindex);
+        this.setFocusedTab(this.foucusedindex);
+        this.change.emit();
+      }
+      else if (ev.key === 'Tab' || ev.key === 'Escape') {
+        this.foucusedindex = undefined;
+        this.selectedtab = this._processedTabs[this.selectedindex]['tabKey'];
+        this.handleTabClick(this.selectedtab, parseInt(this.selectedindex));
+        ev.preventDefault();
+        this.setFocusedTab(this.selectedindex);
+      }
+      // this.setFocusedTab();
+    };
+  }
+  handleTabClick(tab, index) {
+    this.selectedindex = index.toString();
+    this.foucusedindex = undefined;
+    this.selectedtab = tab;
+    this.change.emit();
+    this.setFoucusedBtn(false, this.selectedindex);
+  }
+  componentWillRender() {
+    if (!this._processedTabs) {
+      this._processedTabs = [];
+      if (this.tabs) {
+        this.tabs.split(',').forEach((label) => {
+          label = label.trim();
+          this._processedTabs.push(new Tab(label, label));
+        });
+      }
+      this._hostElem.querySelectorAll('ez-tab').forEach((elem) => {
+        const tabKey = elem.getAttribute('tabKey');
+        const label = elem.getAttribute('label');
+        const t = new Tab(label, tabKey);
+        const content = elem.firstChild;
+        if (content) {
+          content.setAttribute('slot', 'tab' + this._processedTabs.length);
+          this._hostElem.appendChild(content);
+        }
+        this._processedTabs.push(t);
+      });
+    }
+  }
+  handleSlotChange(ev) {
+    const slot = ev.target;
+    const content = slot.assignedElements()[0];
+    if (content) {
+      content.style.marginLeft = "6px";
+    }
+  }
+  scrollBackward() {
+    const container = this._scrollContainer;
+    if (container) {
+      container.scrollLeft -= container.clientWidth;
+    }
+  }
+  scrollFoward() {
+    const container = this._scrollContainer;
+    if (container) {
+      let lastTab = null;
+      container.querySelectorAll('.tab').forEach((tab) => {
+        if (tab.getBoundingClientRect().right < container.clientWidth) {
+          lastTab = tab;
+        }
+      });
+      container.scrollLeft = lastTab.offsetLeft + lastTab.offsetWidth;
+    }
+  }
+  componentDidRender() {
+    this.updateScroll();
+  }
+  updateScroll() {
+    const container = this._scrollContainer;
+    if (container) {
+      const { scrollWidth, clientWidth, scrollLeft } = container;
+      const remainingScroll = scrollWidth - clientWidth - Math.ceil(scrollLeft);
+      this._startHidden = container.scrollLeft > 0;
+      this._endHidden = remainingScroll > 0;
+      if (this._startHidden) {
+        this._backwardButton.classList.remove('hidden');
+      }
+      else {
+        this._backwardButton.classList.add('hidden');
+      }
+      if (this._endHidden) {
+        this._forwardButton.classList.remove('hidden');
+      }
+      else {
+        this._forwardButton.classList.add('hidden');
+      }
+      const classNames = ['', 'startHidden', 'endHidden', 'midle'];
+      const currentClass = classNames[Number(this._startHidden) | Number(this._endHidden) << 1];
+      classNames.forEach((name) => {
+        if (name !== currentClass && container.classList.contains(name)) {
+          container.classList.remove(name);
+        }
+      });
+      if (currentClass && !container.classList.contains(currentClass)) {
+        container.classList.add(currentClass);
+      }
+    }
+  }
+  domScrollHandler() {
+    window.clearTimeout(this._scrollCallBack);
+    this._scrollCallBack = window.setTimeout(() => { this.updateScroll(); }, 200);
+  }
+  setFocusedTab(index) {
+    window.clearTimeout(this._scrollCallBackTeste);
+    this._scrollCallBackTeste = window.setTimeout(() => {
+      const tabtoscroll = this._scrollContainer.querySelector(`#tab${index}`);
+      console.log('tabtoscroll => ID', `#tab${this.selectedindex}`);
+      console.log('tabtoscroll', tabtoscroll);
+      tabtoscroll.scrollIntoView();
+    }, 200);
+  }
+  getTextWidth(text) {
+    if (this._textMesurement === undefined) {
+      this._textMesurement = this._hostElem.shadowRoot.ownerDocument.createElement("canvas");
+    }
+    const context = this._textMesurement.getContext("2d");
+    context.font = '14px Sora, Algerian';
+    return Math.min(220, 24 + context.measureText(text).width) + 'px';
+  }
+  ;
+  setFoucusedBtn(visible, paramater) {
+    const tabsButtons = this._scrollContainer.querySelectorAll('.tab');
+    tabsButtons.forEach((el) => {
+      el.classList.remove('is-focused');
+      if (el.id === 'tab' + paramater && visible) {
+        el.classList.add('is-focused');
+      }
+    });
+  }
+  render() {
+    return (index.h(index.Host, null, index.h("button", { class: "backward-button", ref: (el) => this._backwardButton = el, onClick: () => this.scrollBackward() }), index.h("div", { class: "scroll", ref: (el) => this._scrollContainer = el,
+      // onScroll={() => this.domScrollHandler()}
+      onKeyDown: (ev) => this.setFoucusedParam(ev) }, this._processedTabs.map((tab, index$1) => {
+      const labelStyle = { 'min-width': this.getTextWidth(tab.label) };
+      const tabId = "tab" + index$1;
+      const isSelected = index$1 === parseInt(this.selectedindex) || (this.selectedtab && tab.tabKey === this.selectedtab);
+      if (isSelected) {
+        this.selectedtab = tab.tabKey;
+        this.selectedindex = index$1.toString();
+      }
+      return index.h("button", { id: tabId, class: `tab${isSelected ? " is-active" : ""}`, onClick: () => this.handleTabClick(tab.tabKey, index$1), style: labelStyle }, index.h("span", { class: "tab-label", title: tab.label }, tab.label), index.h("slot", { name: tabId, onSlotchange: (ev) => { this.handleSlotChange(ev); } }));
+    })), index.h("button", { class: "forward-button", ref: (el) => this._forwardButton = el, onClick: () => this.scrollFoward() })));
+  }
+  get _hostElem() { return index.getElement(this); }
+};
+class Tab {
+  constructor(label, tabKey) {
+    this.label = label;
+    this.tabKey = tabKey;
+  }
+}
 EzTabselector.style = ezTabselectorCss;
 
 const ezTextAreaCss = ":host{--ta--width:100%;--ta--border-radius:var(--border--radius-medium, 12px);--ta--font-size:var(--text--medium, 14px);--ta--font-family:var(--font-pattern, Arial);--ta--font-weight:var(--text-weight--large, 500);--ta--color:var(--title--primary, #000);--ta__input--background-color:var(--background--medium, #e0e0e0);--ta__input--border:var(--border--medium, 2px solid);--ta__input--border-color:var(--ta__input--background-color);--ta__input--focus--border-color:var(--color--primary, #008561);--ta__input--disabled--background-color:var(--color--disable-secondary, #F2F5F8);--ta__input--disabled--color:var(--text--disable, #AFB6C0);--ta__input--error--border-color:#CC2936;--ta__input--floating--padding-top:16px;--ta__message_box--font-size:var(--text--small, 12px);--ta__message_box--info--color:var(--color--success, #22085d);--ta__message_box--error--color:var(--color--error, #FF0000);--ta__label--floating--top:6px;--ta__label--padding-top:12px;--ta__label--padding-left:14px;--ta__label--padding-right:12px;display:flex;flex-wrap:wrap;position:relative;width:var(--ta--width)}textarea{width:100%;box-sizing:border-box;padding:var(--space--medium, 6px);font-weight:var(--text-weight--large, 600);resize:none;border-radius:var(--ta--border-radius);font-family:var(--ta--font-family);font-size:var(--ta--font-size);border:var(--ta__input--border);border-color:var(--ta__input--border-color);background-color:var(--ta__input--background-color);color:var(--ta--color)}textarea:disabled{background-color:var(--ta__input--disabled--background-color);color:var(--ta__input--disabled--color)}textarea:focus{outline:none;border-color:var(--ta__input--focus--border-color)}textarea.hasError{color:var(--ta--color);border-color:var(--ta__input--error--border-color)}.message-box{min-height:16px;min-width:100%;margin-top:2px;line-height:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:var(--ta--font-family);font-size:var(--ta__message_box--font-size);color:var(--ta__message_box--info--color)}.hasError{color:var(--ta__message_box--error--color)}.textarea__label{box-sizing:border-box;position:absolute;z-index:var(--visible);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;-webkit-transition:font-size .05s, top .05s;transition:font-size .05s, top .05s;width:calc(100% - var(--ta__label--padding-right));left:var(--ta--space--medium);font-family:var(--ta--font-family);font-size:var(--ta--font-size);font-weight:var(--ta--font-weight);color:var(--ta--color);top:var(--ta__label--padding-top);left:var(--ta__label--padding-left);padding-right:var(--ta__label--padding-right)}.textarea__label--floated{font-family:var(--ta--font-family);font-size:var(--text--extra-small);color:var(--text--primary);top:var(--ta__label--floating--top)}.textarea__label--disabled{color:var(--ta__input--disabled--color)}.input--with--label{padding-bottom:0;padding-top:var(--ta__input--floating--padding-top)}";
 
-const EzTextArea = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.ezChange = index.createEvent(this, "ezChange", 7);
-    /**
-     * Deixa o campo disponível ou não para digitação.
-     */
-    this.enabled = true;
-    /**
-     * Ajusta o numero de linhas e consequentemente o height do textarea. Valor default: 4
-     */
-    this.rows = 4;
-  }
-  showError() {
-    const hasError = typeof this.errormessage === 'string' && this.errormessage !== '';
-    if (hasError) {
-      this._inputElem.classList.add('hasError');
-      this._messageBoxElem.classList.add('hasError');
-    }
-    else {
-      this._inputElem.classList.remove('hasError');
-      this._messageBoxElem.classList.remove('hasError');
-    }
-  }
-  updateInputValue() {
-    this._inputElem.value = this.value;
-    this.handleChange();
-    this.adjustFloatingLabel();
-  }
-  adjustFloatingLabel() {
-    if (this.label) {
-      if (!this._inputElem.classList.contains("input--with--label")) {
-        this._inputElem.classList.add("input--with--label");
-      }
-      const hasValue = this.value && this.value.toString().length > 0;
-      const containsFloatedClass = this._labelElem.classList.contains("textarea__label--floated");
-      if (hasValue || this.isFocused()) {
-        if (!containsFloatedClass) {
-          this._labelElem.classList.add("textarea__label--floated");
-        }
-      }
-      else {
-        if (containsFloatedClass) {
-          this._labelElem.classList.remove("textarea__label--floated");
-        }
-      }
-    }
-  }
-  isFocused() {
-    return this._hostElement.shadowRoot.activeElement !== null;
-  }
-  //---------------------------------------------
-  // Public methods
-  //---------------------------------------------
-  /**
-   * Faz o foco no componente de input
-   */
-  async setFocus() {
-    this._inputElem.focus();
-  }
-  /**
-   * Remove o foco no componente de input
-   */
-  async setBlur() {
-    this._inputElem.blur();
-  }
-  //---------------------------------------------
-  // Event handlers
-  //---------------------------------------------
-  handleFocusout() {
-    this.adjustFloatingLabel();
-  }
-  handleChange() {
-    this.value = this._inputElem.value;
-  }
-  handleFocus() {
-    if (this.label && this._labelElem && !this._labelElem.classList.contains("textarea__label--floated")) {
-      this._labelElem.classList.add("textarea__label--floated");
-    }
-  }
-  //---------------------------------------------
-  // Lifecycle web component
-  //---------------------------------------------
-  componentDidLoad() {
-    this.showError();
-    this.adjustFloatingLabel();
-  }
-  render() {
-    return (index.h(index.Host, null, this.label ?
-      index.h("label", { ref: (el) => this._labelElem = el, class: this.enabled ? "textarea__label" : "textarea__label textarea__label--disabled", onClick: () => this._inputElem.focus(), title: this.label }, this.label)
-      : null, index.h("textarea", { onFocus: () => this.handleFocus(), ref: (el) => this._inputElem = el, value: this.value, disabled: !this.enabled, onInput: () => { this.handleChange(); }, onFocusout: () => { this.handleFocusout(); }, onKeyDown: event => event.stopPropagation(), rows: this.rows }), index.h("span", { class: "message-box", ref: (el) => this._messageBoxElem = el, title: this.errormessage }, this.errormessage)));
-  }
-  get _hostElement() { return index.getElement(this); }
-  static get watchers() { return {
-    "errormessage": ["showError"],
-    "value": ["updateInputValue"]
-  }; }
-};
+const EzTextArea = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.ezChange = index.createEvent(this, "ezChange", 7);
+    /**
+     * Deixa o campo disponível ou não para digitação.
+     */
+    this.enabled = true;
+    /**
+     * Ajusta o numero de linhas e consequentemente o height do textarea. Valor default: 4
+     */
+    this.rows = 4;
+  }
+  showError() {
+    const hasError = typeof this.errormessage === 'string' && this.errormessage !== '';
+    if (hasError) {
+      this._inputElem.classList.add('hasError');
+      this._messageBoxElem.classList.add('hasError');
+    }
+    else {
+      this._inputElem.classList.remove('hasError');
+      this._messageBoxElem.classList.remove('hasError');
+    }
+  }
+  updateInputValue() {
+    this._inputElem.value = this.value;
+    this.handleChange();
+    this.adjustFloatingLabel();
+  }
+  adjustFloatingLabel() {
+    if (this.label) {
+      if (!this._inputElem.classList.contains("input--with--label")) {
+        this._inputElem.classList.add("input--with--label");
+      }
+      const hasValue = this.value && this.value.toString().length > 0;
+      const containsFloatedClass = this._labelElem.classList.contains("textarea__label--floated");
+      if (hasValue || this.isFocused()) {
+        if (!containsFloatedClass) {
+          this._labelElem.classList.add("textarea__label--floated");
+        }
+      }
+      else {
+        if (containsFloatedClass) {
+          this._labelElem.classList.remove("textarea__label--floated");
+        }
+      }
+    }
+  }
+  isFocused() {
+    return this._hostElement.shadowRoot.activeElement !== null;
+  }
+  //---------------------------------------------
+  // Public methods
+  //---------------------------------------------
+  /**
+   * Faz o foco no componente de input
+   */
+  async setFocus() {
+    this._inputElem.focus();
+  }
+  /**
+   * Remove o foco no componente de input
+   */
+  async setBlur() {
+    this._inputElem.blur();
+  }
+  //---------------------------------------------
+  // Event handlers
+  //---------------------------------------------
+  handleFocusout() {
+    this.adjustFloatingLabel();
+  }
+  handleChange() {
+    this.value = this._inputElem.value;
+  }
+  handleFocus() {
+    if (this.label && this._labelElem && !this._labelElem.classList.contains("textarea__label--floated")) {
+      this._labelElem.classList.add("textarea__label--floated");
+    }
+  }
+  //---------------------------------------------
+  // Lifecycle web component
+  //---------------------------------------------
+  componentDidLoad() {
+    this.showError();
+    this.adjustFloatingLabel();
+  }
+  render() {
+    return (index.h(index.Host, null, this.label ?
+      index.h("label", { ref: (el) => this._labelElem = el, class: this.enabled ? "textarea__label" : "textarea__label textarea__label--disabled", onClick: () => this._inputElem.focus(), title: this.label }, this.label)
+      : null, index.h("textarea", { onFocus: () => this.handleFocus(), ref: (el) => this._inputElem = el, value: this.value, disabled: !this.enabled, onInput: () => { this.handleChange(); }, onFocusout: () => { this.handleFocusout(); }, onKeyDown: event => event.stopPropagation(), rows: this.rows }), index.h("span", { class: "message-box", ref: (el) => this._messageBoxElem = el, title: this.errormessage }, this.errormessage)));
+  }
+  get _hostElement() { return index.getElement(this); }
+  static get watchers() { return {
+    "errormessage": ["showError"],
+    "value": ["updateInputValue"]
+  }; }
+};
 EzTextArea.style = ezTextAreaCss;
 
-function isValidNumber(strValue) {
-  return strValue && /^-?\d*[.,]?\d*$/.test(strValue);
+function isValidNumber(strValue) {
+  return strValue && /^-?\d*[.,]?\d*$/.test(strValue);
 }
 
 const ezTextInputCss = ":host{--it--height:42px;--it--width:100%;--it__icon--width:48px;--it--border-radius:var(--border--radius-medium, 12px);--it--font-size:var(--text--medium, 14px);--it--font-family:var(--font-pattern, Arial);--it--font-weight:var(--text-weight--large, 500);--it--color:var(--title--primary, #000);--it__input--background-color:var(--background--medium, #e0e0e0);--it__input--border:var(--border--medium, 2px solid);--it__input--border-color:var(--it__input--background-color);--it__input--focus--border-color:var(--color--primary, #008561);--it__input--disabled--background-color:var(--color--disable-secondary, #F2F5F8);--it__input--disabled--color:var(--text--disable, #AFB6C0);--it__input--error--border-color:#CC2936;--it__message_box--font-size:var(--text--small, 12px);--it__message_box--info--color:var(--color--success, #22085d);--it__message_box--error--color:var(--color--error, #FF0000);--it__label--floating--top:6px;--it__label--padding-top:12px;--it__label--padding-left:14px;--it__label--padding-right:12px;display:flex;flex-wrap:wrap;position:relative;width:var(--it--width)}input{width:100%;box-sizing:border-box;padding:var(--space--medium, 6px);font-weight:var(--text-weight--large, 600);height:var(--it--height);border-radius:var(--it--border-radius);font-family:var(--it--font-family);font-size:var(--it--font-size);border:var(--it__input--border);border-color:var(--it__input--border-color);background-color:var(--it__input--background-color);color:var(--it--color)}input:disabled{background-color:var(--it__input--disabled--background-color);color:var(--it__input--disabled--color)}input:focus{outline:none;border-color:var(--it__input--focus--border-color)}input.icon--left{padding-left:var(--it__icon--width)}input.icon--right{padding-right:var(--it__icon--width)}input.hasError{color:var(--it--color);border-color:var(--it__input--error--border-color)}input.text--right{text-align:right}.message-box{min-height:16px;min-width:100%;margin-top:2px;line-height:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:var(--it--font-family);font-size:var(--it__message_box--font-size);color:var(--it__message_box--info--color)}.hasError{color:var(--it__message_box--error--color)}.input__label{box-sizing:border-box;position:absolute;z-index:var(--visible);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;-webkit-transition:font-size .05s, top .05s;transition:font-size .05s, top .05s;width:calc(100% - var(--it__label--padding-right));left:var(--it--space--medium);font-family:var(--it--font-family);font-size:var(--it--font-size);font-weight:var(--it--font-weight);color:var(--it--color);top:var(--it__label--padding-top);left:var(--it__label--padding-left);padding-right:var(--it__label--padding-right)}.input__label--floated{font-family:var(--it--font-family);font-size:var(--text--extra-small);color:var(--text--primary);top:var(--it__label--floating--top)}.input__label--disabled{color:var(--it__input--disabled--color)}.input__label--left{left:calc(var(--it__icon--width) + 2px);width:calc(100% - var(--it__icon--width))}.input__label--right{right:var(--it__icon--width);width:calc(100% - var(--it__icon--width))}.input__label--left.input__label--right{left:calc(var(--it__icon--width) + 2px);width:calc(100% - var(--it__icon--width) * 2)}.input--with--label{padding-bottom:0}";
 
-const EzTextInput = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.ezChange = index.createEvent(this, "ezChange", 7);
-    /**
-     * Deixa o campo disponível ou não para digitação.
-     */
-    this.enabled = true;
-  }
-  showError() {
-    const hasError = typeof this.errormessage === 'string' && this.errormessage !== '';
-    if (hasError) {
-      this._inputElem.classList.add('hasError');
-      this._messageBoxElem.classList.add('hasError');
-    }
-    else {
-      this._inputElem.classList.remove('hasError');
-      this._messageBoxElem.classList.remove('hasError');
-    }
-  }
-  prepareMask() {
-    if (this.mask) {
-      if (this._maskFormatter == undefined) {
-        this._maskFormatter = new RequestMetadata.MaskFormatter(this.mask);
-      }
-      else {
-        this._maskFormatter.mask = this.mask;
-      }
-    }
-  }
-  updateInputValue() {
-    this._inputElem.value = this.value;
-    this.handleChange();
-    this.ezChange.emit();
-    this.adjustFloatingLabel();
-  }
-  adjustFloatingLabel() {
-    if (this.label) {
-      if (!this._inputElem.classList.contains("input--with--label")) {
-        this._inputElem.classList.add("input--with--label");
-      }
-      const hasValue = this.value && this.value.toString().length > 0;
-      const containsFloatedClass = this._labelElem.classList.contains("input__label--floated");
-      if (hasValue || this.isFocused()) {
-        if (!containsFloatedClass) {
-          this._labelElem.classList.add("input__label--floated");
-        }
-      }
-      else {
-        if (containsFloatedClass) {
-          this._labelElem.classList.remove("input__label--floated");
-        }
-      }
-    }
-  }
-  isFocused() {
-    return this._hostElement.shadowRoot.activeElement !== null;
-  }
-  //---------------------------------------------
-  // Public methods
-  //---------------------------------------------
-  /**
-   * Faz o foco no componente de input
-   */
-  async setFocus() {
-    this._inputElem.focus();
-  }
-  /**
-   * Remove o foco no componente de input
-   */
-  async setBlur() {
-    this._inputElem.blur();
-  }
-  //---------------------------------------------
-  // Event handlers
-  //---------------------------------------------
-  handleFocusout() {
-    const value = this._inputElem.value;
-    if (value && this._maskFormatter) {
-      try {
-        this._inputElem.value = this._maskFormatter.format(value);
-      }
-      catch (e) {
-        this.errormessage = e.message;
-      }
-    }
-    this.value = this._inputElem.value;
-    this.adjustFloatingLabel();
-  }
-  isValidValue(value) {
-    if (this.onlynumber) {
-      return value == "" || isValidNumber(value);
-    }
-    if (this.restrict) {
-      return Array.from(value).reduce((valid, c) => valid && this.restrict.indexOf(c) > -1, true);
-    }
-    return true;
-  }
-  handleChange() {
-    if (!this._inputElem) {
-      return;
-    }
-    const value = this._inputElem.value;
-    if (this.isValidValue(value)) {
-      this._lastValidValue = value;
-    }
-    else {
-      this._inputElem.value = this._lastValidValue === undefined ? "" : this._lastValidValue;
-    }
-    this.value = this._inputElem.value;
-  }
-  handleSlotChange(ev) {
-    const slot = ev.target;
-    const content = slot.assignedElements()[0];
-    if (content) {
-      content.style.position = "absolute";
-      content.style.display = "flex";
-      content.style.alignItems = "center";
-      content.style.justifyContent = "center";
-      content.style.overflow = "hidden";
-      content.style.top = "0px";
-      content.style.width = "var(--it__icon--width)";
-      content.style.height = "var(--it--height)";
-      if (slot.name == "leftIcon") {
-        content.style.left = "0px";
-        content.style.borderRadius = "var(--it--border-radius) 0 0 var(--it--border-radius)";
-        this._inputElem.classList.add('icon--left');
-        if (this._labelElem) {
-          this._labelElem.classList.add('input__label--left');
-        }
-      }
-      else if (slot.name == "rightIcon") {
-        content.style.right = "0px";
-        content.style.borderRadius = "0 var(--it--border-radius) var(--it--border-radius) 0";
-        this._inputElem.classList.add('icon--right');
-        if (this._labelElem) {
-          this._labelElem.classList.add('input__label--right');
-        }
-      }
-    }
-    this.showError();
-  }
-  doFocus() {
-    if (this.label && this._labelElem && !this._labelElem.classList.contains("input__label--floated")) {
-      this._labelElem.classList.add("input__label--floated");
-    }
-  }
-  //---------------------------------------------
-  // Lifecycle web component
-  //---------------------------------------------
-  componentDidLoad() {
-    if (this.onlynumber) {
-      this._inputElem.classList.add('text--right');
-    }
-    this.showError();
-    this.prepareMask();
-    this.adjustFloatingLabel();
-  }
-  componentWillLoad() {
-    this.prepareMask();
-    if (this.value) {
-      if (this._maskFormatter) {
-        try {
-          this.value = this._maskFormatter.format(this.value);
-        }
-        catch (e) {
-          this.errormessage = e.message;
-        }
-      }
-      if (!this.isValidValue(this.value)) {
-        this._lastValidValue = "";
-        this.value = "";
-      }
-    }
-  }
-  render() {
-    return (index.h(index.Host, null, index.h("slot", { name: "leftIcon", onSlotchange: (ev) => { this.handleSlotChange(ev); } }), this.label ?
-      index.h("label", { ref: (el) => this._labelElem = el, class: this.enabled ? "input__label" : "input__label input__label--disabled", onClick: () => this._inputElem.focus(), title: this.label }, this.label)
-      : null, index.h("input", { onFocus: () => this.doFocus(), ref: (el) => this._inputElem = el, type: "text", value: this.value, disabled: !this.enabled, onInput: () => { this.handleChange(); }, onFocusout: () => { this.handleFocusout(); } }), index.h("slot", { name: "rightIcon", onSlotchange: (ev) => { this.handleSlotChange(ev); } }), index.h("span", { class: "message-box", ref: (el) => this._messageBoxElem = el, title: this.errormessage }, this.errormessage)));
-  }
-  get _hostElement() { return index.getElement(this); }
-  static get watchers() { return {
-    "errormessage": ["showError"],
-    "mask": ["prepareMask"],
-    "value": ["updateInputValue"]
-  }; }
-};
+const EzTextInput = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.ezChange = index.createEvent(this, "ezChange", 7);
+    /**
+     * Deixa o campo disponível ou não para digitação.
+     */
+    this.enabled = true;
+  }
+  showError() {
+    const hasError = typeof this.errormessage === 'string' && this.errormessage !== '';
+    if (hasError) {
+      this._inputElem.classList.add('hasError');
+      this._messageBoxElem.classList.add('hasError');
+    }
+    else {
+      this._inputElem.classList.remove('hasError');
+      this._messageBoxElem.classList.remove('hasError');
+    }
+  }
+  prepareMask() {
+    if (this.mask) {
+      if (this._maskFormatter == undefined) {
+        this._maskFormatter = new RequestMetadata.MaskFormatter(this.mask);
+      }
+      else {
+        this._maskFormatter.mask = this.mask;
+      }
+    }
+  }
+  updateInputValue() {
+    this._inputElem.value = this.value;
+    this.handleChange();
+    this.ezChange.emit();
+    this.adjustFloatingLabel();
+  }
+  adjustFloatingLabel() {
+    if (this.label) {
+      if (!this._inputElem.classList.contains("input--with--label")) {
+        this._inputElem.classList.add("input--with--label");
+      }
+      const hasValue = this.value && this.value.toString().length > 0;
+      const containsFloatedClass = this._labelElem.classList.contains("input__label--floated");
+      if (hasValue || this.isFocused()) {
+        if (!containsFloatedClass) {
+          this._labelElem.classList.add("input__label--floated");
+        }
+      }
+      else {
+        if (containsFloatedClass) {
+          this._labelElem.classList.remove("input__label--floated");
+        }
+      }
+    }
+  }
+  isFocused() {
+    return this._hostElement.shadowRoot.activeElement !== null;
+  }
+  //---------------------------------------------
+  // Public methods
+  //---------------------------------------------
+  /**
+   * Faz o foco no componente de input
+   */
+  async setFocus() {
+    this._inputElem.focus();
+  }
+  /**
+   * Remove o foco no componente de input
+   */
+  async setBlur() {
+    this._inputElem.blur();
+  }
+  //---------------------------------------------
+  // Event handlers
+  //---------------------------------------------
+  handleFocusout() {
+    const value = this._inputElem.value;
+    if (value && this._maskFormatter) {
+      try {
+        this._inputElem.value = this._maskFormatter.format(value);
+      }
+      catch (e) {
+        this.errormessage = e.message;
+      }
+    }
+    this.value = this._inputElem.value;
+    this.adjustFloatingLabel();
+  }
+  isValidValue(value) {
+    if (this.onlynumber) {
+      return value == "" || isValidNumber(value);
+    }
+    if (this.restrict) {
+      return Array.from(value).reduce((valid, c) => valid && this.restrict.indexOf(c) > -1, true);
+    }
+    return true;
+  }
+  handleChange() {
+    if (!this._inputElem) {
+      return;
+    }
+    const value = this._inputElem.value;
+    if (this.isValidValue(value)) {
+      this._lastValidValue = value;
+    }
+    else {
+      this._inputElem.value = this._lastValidValue === undefined ? "" : this._lastValidValue;
+    }
+    this.value = this._inputElem.value;
+  }
+  handleSlotChange(ev) {
+    const slot = ev.target;
+    const content = slot.assignedElements()[0];
+    if (content) {
+      content.style.position = "absolute";
+      content.style.display = "flex";
+      content.style.alignItems = "center";
+      content.style.justifyContent = "center";
+      content.style.overflow = "hidden";
+      content.style.top = "0px";
+      content.style.width = "var(--it__icon--width)";
+      content.style.height = "var(--it--height)";
+      if (slot.name == "leftIcon") {
+        content.style.left = "0px";
+        content.style.borderRadius = "var(--it--border-radius) 0 0 var(--it--border-radius)";
+        this._inputElem.classList.add('icon--left');
+        if (this._labelElem) {
+          this._labelElem.classList.add('input__label--left');
+        }
+      }
+      else if (slot.name == "rightIcon") {
+        content.style.right = "0px";
+        content.style.borderRadius = "0 var(--it--border-radius) var(--it--border-radius) 0";
+        this._inputElem.classList.add('icon--right');
+        if (this._labelElem) {
+          this._labelElem.classList.add('input__label--right');
+        }
+      }
+    }
+    this.showError();
+  }
+  doFocus() {
+    if (this.label && this._labelElem && !this._labelElem.classList.contains("input__label--floated")) {
+      this._labelElem.classList.add("input__label--floated");
+    }
+  }
+  //---------------------------------------------
+  // Lifecycle web component
+  //---------------------------------------------
+  componentDidLoad() {
+    if (this.onlynumber) {
+      this._inputElem.classList.add('text--right');
+    }
+    this.showError();
+    this.prepareMask();
+    this.adjustFloatingLabel();
+  }
+  componentWillLoad() {
+    this.prepareMask();
+    if (this.value) {
+      if (this._maskFormatter) {
+        try {
+          this.value = this._maskFormatter.format(this.value);
+        }
+        catch (e) {
+          this.errormessage = e.message;
+        }
+      }
+      if (!this.isValidValue(this.value)) {
+        this._lastValidValue = "";
+        this.value = "";
+      }
+    }
+  }
+  render() {
+    return (index.h(index.Host, null, index.h("slot", { name: "leftIcon", onSlotchange: (ev) => { this.handleSlotChange(ev); } }), this.label ?
+      index.h("label", { ref: (el) => this._labelElem = el, class: this.enabled ? "input__label" : "input__label input__label--disabled", onClick: () => this._inputElem.focus(), title: this.label }, this.label)
+      : null, index.h("input", { onFocus: () => this.doFocus(), ref: (el) => this._inputElem = el, type: "text", value: this.value, disabled: !this.enabled, onInput: () => { this.handleChange(); }, onFocusout: () => { this.handleFocusout(); } }), index.h("slot", { name: "rightIcon", onSlotchange: (ev) => { this.handleSlotChange(ev); } }), index.h("span", { class: "message-box", ref: (el) => this._messageBoxElem = el, title: this.errormessage }, this.errormessage)));
+  }
+  get _hostElement() { return index.getElement(this); }
+  static get watchers() { return {
+    "errormessage": ["showError"],
+    "mask": ["prepareMask"],
+    "value": ["updateInputValue"]
+  }; }
+};
 EzTextInput.style = ezTextInputCss;
 
 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}}";
 
-const PlaceHolder = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-  }
-  render() {
-    return index.h(index.Host, null);
-  }
-};
+const PlaceHolder = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+  }
+  render() {
+    return index.h(index.Host, null);
+  }
+};
 PlaceHolder.style = placeHolderCss;
 
 exports.ez_button = EzButton;