@sankhyalabs/ezui 1.1.4 → 1.1.8

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

@@ -0,0 +1,3341 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-9403fe8f.js');
+const RequestMetadata = require('./RequestMetadata-2cd01e8a.js');
+const DataUnit = require('./DataUnit-28b290cb.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); } })));
+    }
+  }
+};
+EzButton.style = ezButtonCss;
+
+class FloatingEntry {
+    constructor(parent, content, opts) {
+        this.parent = new WeakRef(parent);
+        this.content = new WeakRef(content);
+        this.options = opts;
+    }
+}
+class FloatingManager {
+    static init() {
+        FloatingManager.entries = [];
+        document.addEventListener('mousedown', FloatingManager.handleDocumentEvent);
+        document.addEventListener('keydown', FloatingManager.handleKeyboardEvent);
+        FloatingManager.initialized = true;
+    }
+    static innerClick(container, node) {
+        if (container.contains(node)) {
+            return true;
+        }
+        if (container.shadowRoot && container.shadowRoot.contains(node)) {
+            return true;
+        }
+        return false;
+    }
+    static doClose(id, entry, target) {
+        if (!target || entry.options.autoClose) {
+            const parent = entry.parent.deref();
+            const content = entry.content.deref();
+            if (parent && content) {
+                const innerClickFunction = entry.options.innerClickTest ? entry.options.innerClickTest : FloatingManager.innerClick;
+                if (!target || !innerClickFunction(content, target)) {
+                    content.remove();
+                    delete FloatingManager.entries[id];
+                }
+            }
+            else {
+                delete FloatingManager.entries[id];
+            }
+        }
+    }
+    static handleDocumentEvent(event) {
+        FloatingManager.entries.forEach((entry, index) => {
+            FloatingManager.doClose(index, entry, event.composedPath()[0]);
+        });
+    }
+    static handleKeyboardEvent(event) {
+        if (event.key === 'Escape') {
+            for (let index = FloatingManager.entries.length; index >= 0; index--) {
+                const entry = FloatingManager.entries[index];
+                if (entry) {
+                    FloatingManager.close(index);
+                    break;
+                }
+            }
+        }
+    }
+    static applyStyle(element, propertyName, value) {
+        if (value) {
+            element.style.setProperty(propertyName, value);
+        }
+    }
+    static getFloatIndex(content, parent) {
+        for (let index = 0; index < FloatingManager.entries.length; index++) {
+            const entry = FloatingManager.entries[index];
+            if (entry && content === entry.content.deref() && parent === entry.parent.deref()) {
+                return index;
+            }
+        }
+        return -1;
+    }
+    static float(content, parent, options = { autoClose: true }) {
+        if (!FloatingManager.initialized) {
+            FloatingManager.init();
+        }
+        const alreadyFloatingIndex = FloatingManager.getFloatIndex(content, parent);
+        if (alreadyFloatingIndex > -1) {
+            return alreadyFloatingIndex;
+        }
+        content.style.position = 'absolute';
+        FloatingManager.applyStyle(content, "top", options.top);
+        FloatingManager.applyStyle(content, "left", options.left);
+        FloatingManager.applyStyle(content, "right", options.right);
+        FloatingManager.applyStyle(content, "bottom", options.bottom);
+        parent.appendChild(content);
+        FloatingManager.entries.push(new FloatingEntry(parent, content, options));
+        return FloatingManager.entries.length - 1;
+    }
+    static updateFloatPosition(content, parent, options = { autoClose: true }) {
+        const alreadyFloatingIndex = FloatingManager.getFloatIndex(content, parent);
+        if (alreadyFloatingIndex > -1) {
+            FloatingManager.applyStyle(content, "top", options.top);
+            FloatingManager.applyStyle(content, "left", options.left);
+            FloatingManager.applyStyle(content, "right", options.right);
+            FloatingManager.applyStyle(content, "bottom", options.bottom);
+        }
+    }
+    static close(id) {
+        if (FloatingManager.entries[id]) {
+            FloatingManager.doClose(id, FloatingManager.entries[id], undefined);
+        }
+    }
+}
+
+class DateUtils {
+    static clearTime(date, adjustDayLightSavingTime = true) {
+        const newDate = new Date(date.getFullYear(), date.getMonth(), date.getDate(), 0, 0, 0, 0);
+        return adjustDayLightSavingTime ? DateUtils.adjustDLST(newDate) : newDate;
+    }
+    static strToDate(strValue, adjustDayLightSavingTime = true, monthYearMode = false) {
+        /** monthYearMode é um booleano para usar o formato MM/YYYY.
+         * Quando ativado, é retornado o primeiro dia do mês apenas para construir a data.
+         * Não há necessidade de verificar o horário de verão quando utilizado esse modo. */
+        let parts;
+        if (monthYearMode) {
+            parts = /^(1[0-2]|0[1-9]|[1-9])[^\d]?(\d{2}|\d{4})(?:\s(\d{1,2}):(\d{1,2}):?(\d{0,2}))?$/.exec(strValue);
+        }
+        else {
+            parts = /^(3[01]|[1-2]\d|0[1-9]|[1-9])[^\d]?(1[0-2]|0[1-9]|[1-9])[^\d]?(\d{2}|\d{4})(?:\s(\d{1,2}):(\d{1,2}):?(\d{0,2}))?$/.exec(strValue);
+        }
+        if (!parts) {
+            return undefined;
+        }
+        var day = monthYearMode ? 1 : Number(parts[1]);
+        var month = Number(parts[(monthYearMode ? 1 : 2)]);
+        var year = Number(parts[(monthYearMode ? 2 : 3)]);
+        var hour = Number(parts[(monthYearMode ? 3 : 4)] || 0);
+        var min = Number(parts[(monthYearMode ? 4 : 5)] || 0);
+        var sec = Number(parts[(monthYearMode ? 5 : 6)] || 0);
+        if (year < 100) {
+            year += year < 30 ? 2000 : 1900;
+        }
+        let date = new Date(year, month - 1, day, hour, min, sec, 0);
+        if (adjustDayLightSavingTime === true && !monthYearMode && hour == 0) {
+            date = DateUtils.adjustDLST(date);
+        }
+        return date;
+    }
+    static adjustDLST(date) {
+        //Work around para corrigir o Bug do horário de verão.
+        if (date.getHours() == 23) {
+            return new Date(date.getFullYear(), date.getMonth(), date.getDate() + 1, 1, 0, 0, 0);
+        }
+        return date;
+    }
+}
+
+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"]
+  }; }
+};
+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"]
+  }; }
+};
+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"]
+  }; }
+};
+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"]
+  }; }
+};
+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"]
+  }; }
+};
+EzDateInput.style = ezDateInputCss;
+
+function _defineProperty(obj, key, value) {
+  if (key in obj) {
+    Object.defineProperty(obj, key, {
+      value: value,
+      enumerable: true,
+      configurable: true,
+      writable: true
+    });
+  } else {
+    obj[key] = value;
+  }
+
+  return obj;
+}
+
+function ownKeys(object, enumerableOnly) {
+  var keys = Object.keys(object);
+
+  if (Object.getOwnPropertySymbols) {
+    var symbols = Object.getOwnPropertySymbols(object);
+
+    if (enumerableOnly) {
+      symbols = symbols.filter(function (sym) {
+        return Object.getOwnPropertyDescriptor(object, sym).enumerable;
+      });
+    }
+
+    keys.push.apply(keys, symbols);
+  }
+
+  return keys;
+}
+
+function _objectSpread2(target) {
+  for (var i = 1; i < arguments.length; i++) {
+    var source = arguments[i] != null ? arguments[i] : {};
+
+    if (i % 2) {
+      ownKeys(Object(source), true).forEach(function (key) {
+        _defineProperty(target, key, source[key]);
+      });
+    } else if (Object.getOwnPropertyDescriptors) {
+      Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
+    } else {
+      ownKeys(Object(source)).forEach(function (key) {
+        Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
+      });
+    }
+  }
+
+  return target;
+}
+
+/**
+ * Adapted from React: https://github.com/facebook/react/blob/master/packages/shared/formatProdErrorMessage.js
+ *
+ * Do not require this module directly! Use normal throw error calls. These messages will be replaced with error codes
+ * during build.
+ * @param {number} code
+ */
+function formatProdErrorMessage(code) {
+  return "Minified Redux error #" + code + "; visit https://redux.js.org/Errors?code=" + code + " for the full message or " + 'use the non-minified dev environment for full errors. ';
+}
+
+// Inlined version of the `symbol-observable` polyfill
+var $$observable = (function () {
+  return typeof Symbol === 'function' && Symbol.observable || '@@observable';
+})();
+
+/**
+ * These are private action types reserved by Redux.
+ * For any unknown actions, you must return the current state.
+ * If the current state is undefined, you must return the initial state.
+ * Do not reference these action types directly in your code.
+ */
+var randomString = function randomString() {
+  return Math.random().toString(36).substring(7).split('').join('.');
+};
+
+var ActionTypes = {
+  INIT: "@@redux/INIT" + randomString(),
+  REPLACE: "@@redux/REPLACE" + randomString(),
+  PROBE_UNKNOWN_ACTION: function PROBE_UNKNOWN_ACTION() {
+    return "@@redux/PROBE_UNKNOWN_ACTION" + randomString();
+  }
+};
+
+/**
+ * @param {any} obj The object to inspect.
+ * @returns {boolean} True if the argument appears to be a plain object.
+ */
+function isPlainObject(obj) {
+  if (typeof obj !== 'object' || obj === null) return false;
+  var proto = obj;
+
+  while (Object.getPrototypeOf(proto) !== null) {
+    proto = Object.getPrototypeOf(proto);
+  }
+
+  return Object.getPrototypeOf(obj) === proto;
+}
+
+/**
+ * Creates a Redux store that holds the state tree.
+ * The only way to change the data in the store is to call `dispatch()` on it.
+ *
+ * There should only be a single store in your app. To specify how different
+ * parts of the state tree respond to actions, you may combine several reducers
+ * into a single reducer function by using `combineReducers`.
+ *
+ * @param {Function} reducer A function that returns the next state tree, given
+ * the current state tree and the action to handle.
+ *
+ * @param {any} [preloadedState] The initial state. You may optionally specify it
+ * to hydrate the state from the server in universal apps, or to restore a
+ * previously serialized user session.
+ * If you use `combineReducers` to produce the root reducer function, this must be
+ * an object with the same shape as `combineReducers` keys.
+ *
+ * @param {Function} [enhancer] The store enhancer. You may optionally specify it
+ * to enhance the store with third-party capabilities such as middleware,
+ * time travel, persistence, etc. The only store enhancer that ships with Redux
+ * is `applyMiddleware()`.
+ *
+ * @returns {Store} A Redux store that lets you read the state, dispatch actions
+ * and subscribe to changes.
+ */
+
+function createStore(reducer, preloadedState, enhancer) {
+  var _ref2;
+
+  if (typeof preloadedState === 'function' && typeof enhancer === 'function' || typeof enhancer === 'function' && typeof arguments[3] === 'function') {
+    throw new Error(formatProdErrorMessage(0) );
+  }
+
+  if (typeof preloadedState === 'function' && typeof enhancer === 'undefined') {
+    enhancer = preloadedState;
+    preloadedState = undefined;
+  }
+
+  if (typeof enhancer !== 'undefined') {
+    if (typeof enhancer !== 'function') {
+      throw new Error(formatProdErrorMessage(1) );
+    }
+
+    return enhancer(createStore)(reducer, preloadedState);
+  }
+
+  if (typeof reducer !== 'function') {
+    throw new Error(formatProdErrorMessage(2) );
+  }
+
+  var currentReducer = reducer;
+  var currentState = preloadedState;
+  var currentListeners = [];
+  var nextListeners = currentListeners;
+  var isDispatching = false;
+  /**
+   * This makes a shallow copy of currentListeners so we can use
+   * nextListeners as a temporary list while dispatching.
+   *
+   * This prevents any bugs around consumers calling
+   * subscribe/unsubscribe in the middle of a dispatch.
+   */
+
+  function ensureCanMutateNextListeners() {
+    if (nextListeners === currentListeners) {
+      nextListeners = currentListeners.slice();
+    }
+  }
+  /**
+   * Reads the state tree managed by the store.
+   *
+   * @returns {any} The current state tree of your application.
+   */
+
+
+  function getState() {
+    if (isDispatching) {
+      throw new Error(formatProdErrorMessage(3) );
+    }
+
+    return currentState;
+  }
+  /**
+   * Adds a change listener. It will be called any time an action is dispatched,
+   * and some part of the state tree may potentially have changed. You may then
+   * call `getState()` to read the current state tree inside the callback.
+   *
+   * You may call `dispatch()` from a change listener, with the following
+   * caveats:
+   *
+   * 1. The subscriptions are snapshotted just before every `dispatch()` call.
+   * If you subscribe or unsubscribe while the listeners are being invoked, this
+   * will not have any effect on the `dispatch()` that is currently in progress.
+   * However, the next `dispatch()` call, whether nested or not, will use a more
+   * recent snapshot of the subscription list.
+   *
+   * 2. The listener should not expect to see all state changes, as the state
+   * might have been updated multiple times during a nested `dispatch()` before
+   * the listener is called. It is, however, guaranteed that all subscribers
+   * registered before the `dispatch()` started will be called with the latest
+   * state by the time it exits.
+   *
+   * @param {Function} listener A callback to be invoked on every dispatch.
+   * @returns {Function} A function to remove this change listener.
+   */
+
+
+  function subscribe(listener) {
+    if (typeof listener !== 'function') {
+      throw new Error(formatProdErrorMessage(4) );
+    }
+
+    if (isDispatching) {
+      throw new Error(formatProdErrorMessage(5) );
+    }
+
+    var isSubscribed = true;
+    ensureCanMutateNextListeners();
+    nextListeners.push(listener);
+    return function unsubscribe() {
+      if (!isSubscribed) {
+        return;
+      }
+
+      if (isDispatching) {
+        throw new Error(formatProdErrorMessage(6) );
+      }
+
+      isSubscribed = false;
+      ensureCanMutateNextListeners();
+      var index = nextListeners.indexOf(listener);
+      nextListeners.splice(index, 1);
+      currentListeners = null;
+    };
+  }
+  /**
+   * Dispatches an action. It is the only way to trigger a state change.
+   *
+   * The `reducer` function, used to create the store, will be called with the
+   * current state tree and the given `action`. Its return value will
+   * be considered the **next** state of the tree, and the change listeners
+   * will be notified.
+   *
+   * The base implementation only supports plain object actions. If you want to
+   * dispatch a Promise, an Observable, a thunk, or something else, you need to
+   * wrap your store creating function into the corresponding middleware. For
+   * example, see the documentation for the `redux-thunk` package. Even the
+   * middleware will eventually dispatch plain object actions using this method.
+   *
+   * @param {Object} action A plain object representing “what changed”. It is
+   * a good idea to keep actions serializable so you can record and replay user
+   * sessions, or use the time travelling `redux-devtools`. An action must have
+   * a `type` property which may not be `undefined`. It is a good idea to use
+   * string constants for action types.
+   *
+   * @returns {Object} For convenience, the same action object you dispatched.
+   *
+   * Note that, if you use a custom middleware, it may wrap `dispatch()` to
+   * return something else (for example, a Promise you can await).
+   */
+
+
+  function dispatch(action) {
+    if (!isPlainObject(action)) {
+      throw new Error(formatProdErrorMessage(7) );
+    }
+
+    if (typeof action.type === 'undefined') {
+      throw new Error(formatProdErrorMessage(8) );
+    }
+
+    if (isDispatching) {
+      throw new Error(formatProdErrorMessage(9) );
+    }
+
+    try {
+      isDispatching = true;
+      currentState = currentReducer(currentState, action);
+    } finally {
+      isDispatching = false;
+    }
+
+    var listeners = currentListeners = nextListeners;
+
+    for (var i = 0; i < listeners.length; i++) {
+      var listener = listeners[i];
+      listener();
+    }
+
+    return action;
+  }
+  /**
+   * Replaces the reducer currently used by the store to calculate the state.
+   *
+   * You might need this if your app implements code splitting and you want to
+   * load some of the reducers dynamically. You might also need this if you
+   * implement a hot reloading mechanism for Redux.
+   *
+   * @param {Function} nextReducer The reducer for the store to use instead.
+   * @returns {void}
+   */
+
+
+  function replaceReducer(nextReducer) {
+    if (typeof nextReducer !== 'function') {
+      throw new Error(formatProdErrorMessage(10) );
+    }
+
+    currentReducer = nextReducer; // This action has a similiar effect to ActionTypes.INIT.
+    // Any reducers that existed in both the new and old rootReducer
+    // will receive the previous state. This effectively populates
+    // the new state tree with any relevant data from the old one.
+
+    dispatch({
+      type: ActionTypes.REPLACE
+    });
+  }
+  /**
+   * Interoperability point for observable/reactive libraries.
+   * @returns {observable} A minimal observable of state changes.
+   * For more information, see the observable proposal:
+   * https://github.com/tc39/proposal-observable
+   */
+
+
+  function observable() {
+    var _ref;
+
+    var outerSubscribe = subscribe;
+    return _ref = {
+      /**
+       * The minimal observable subscription method.
+       * @param {Object} observer Any object that can be used as an observer.
+       * The observer object should have a `next` method.
+       * @returns {subscription} An object with an `unsubscribe` method that can
+       * be used to unsubscribe the observable from the store, and prevent further
+       * emission of values from the observable.
+       */
+      subscribe: function subscribe(observer) {
+        if (typeof observer !== 'object' || observer === null) {
+          throw new Error(formatProdErrorMessage(11) );
+        }
+
+        function observeState() {
+          if (observer.next) {
+            observer.next(getState());
+          }
+        }
+
+        observeState();
+        var unsubscribe = outerSubscribe(observeState);
+        return {
+          unsubscribe: unsubscribe
+        };
+      }
+    }, _ref[$$observable] = function () {
+      return this;
+    }, _ref;
+  } // When a store is created, an "INIT" action is dispatched so that every
+  // reducer returns their initial state. This effectively populates
+  // the initial state tree.
+
+
+  dispatch({
+    type: ActionTypes.INIT
+  });
+  return _ref2 = {
+    dispatch: dispatch,
+    subscribe: subscribe,
+    getState: getState,
+    replaceReducer: replaceReducer
+  }, _ref2[$$observable] = observable, _ref2;
+}
+
+function assertReducerShape(reducers) {
+  Object.keys(reducers).forEach(function (key) {
+    var reducer = reducers[key];
+    var initialState = reducer(undefined, {
+      type: ActionTypes.INIT
+    });
+
+    if (typeof initialState === 'undefined') {
+      throw new Error(formatProdErrorMessage(12) );
+    }
+
+    if (typeof reducer(undefined, {
+      type: ActionTypes.PROBE_UNKNOWN_ACTION()
+    }) === 'undefined') {
+      throw new Error(formatProdErrorMessage(13) );
+    }
+  });
+}
+/**
+ * Turns an object whose values are different reducer functions, into a single
+ * reducer function. It will call every child reducer, and gather their results
+ * into a single state object, whose keys correspond to the keys of the passed
+ * reducer functions.
+ *
+ * @param {Object} reducers An object whose values correspond to different
+ * reducer functions that need to be combined into one. One handy way to obtain
+ * it is to use ES6 `import * as reducers` syntax. The reducers may never return
+ * undefined for any action. Instead, they should return their initial state
+ * if the state passed to them was undefined, and the current state for any
+ * unrecognized action.
+ *
+ * @returns {Function} A reducer function that invokes every reducer inside the
+ * passed object, and builds a state object with the same shape.
+ */
+
+
+function combineReducers(reducers) {
+  var reducerKeys = Object.keys(reducers);
+  var finalReducers = {};
+
+  for (var i = 0; i < reducerKeys.length; i++) {
+    var key = reducerKeys[i];
+
+    if (typeof reducers[key] === 'function') {
+      finalReducers[key] = reducers[key];
+    }
+  }
+
+  var finalReducerKeys = Object.keys(finalReducers); // This is used to make sure we don't warn about the same
+
+  var shapeAssertionError;
+
+  try {
+    assertReducerShape(finalReducers);
+  } catch (e) {
+    shapeAssertionError = e;
+  }
+
+  return function combination(state, action) {
+    if (state === void 0) {
+      state = {};
+    }
+
+    if (shapeAssertionError) {
+      throw shapeAssertionError;
+    }
+
+    var hasChanged = false;
+    var nextState = {};
+
+    for (var _i = 0; _i < finalReducerKeys.length; _i++) {
+      var _key = finalReducerKeys[_i];
+      var reducer = finalReducers[_key];
+      var previousStateForKey = state[_key];
+      var nextStateForKey = reducer(previousStateForKey, action);
+
+      if (typeof nextStateForKey === 'undefined') {
+        throw new Error(formatProdErrorMessage(14) );
+      }
+
+      nextState[_key] = nextStateForKey;
+      hasChanged = hasChanged || nextStateForKey !== previousStateForKey;
+    }
+
+    hasChanged = hasChanged || finalReducerKeys.length !== Object.keys(state).length;
+    return hasChanged ? nextState : state;
+  };
+}
+
+/**
+ * Composes single-argument functions from right to left. The rightmost
+ * function can take multiple arguments as it provides the signature for
+ * the resulting composite function.
+ *
+ * @param {...Function} funcs The functions to compose.
+ * @returns {Function} A function obtained by composing the argument functions
+ * from right to left. For example, compose(f, g, h) is identical to doing
+ * (...args) => f(g(h(...args))).
+ */
+function compose() {
+  for (var _len = arguments.length, funcs = new Array(_len), _key = 0; _key < _len; _key++) {
+    funcs[_key] = arguments[_key];
+  }
+
+  if (funcs.length === 0) {
+    return function (arg) {
+      return arg;
+    };
+  }
+
+  if (funcs.length === 1) {
+    return funcs[0];
+  }
+
+  return funcs.reduce(function (a, b) {
+    return function () {
+      return a(b.apply(void 0, arguments));
+    };
+  });
+}
+
+/**
+ * Creates a store enhancer that applies middleware to the dispatch method
+ * of the Redux store. This is handy for a variety of tasks, such as expressing
+ * asynchronous actions in a concise manner, or logging every action payload.
+ *
+ * See `redux-thunk` package as an example of the Redux middleware.
+ *
+ * Because middleware is potentially asynchronous, this should be the first
+ * store enhancer in the composition chain.
+ *
+ * Note that each middleware will be given the `dispatch` and `getState` functions
+ * as named arguments.
+ *
+ * @param {...Function} middlewares The middleware chain to be applied.
+ * @returns {Function} A store enhancer applying the middleware.
+ */
+
+function applyMiddleware() {
+  for (var _len = arguments.length, middlewares = new Array(_len), _key = 0; _key < _len; _key++) {
+    middlewares[_key] = arguments[_key];
+  }
+
+  return function (createStore) {
+    return function () {
+      var store = createStore.apply(void 0, arguments);
+
+      var _dispatch = function dispatch() {
+        throw new Error(formatProdErrorMessage(15) );
+      };
+
+      var middlewareAPI = {
+        getState: store.getState,
+        dispatch: function dispatch() {
+          return _dispatch.apply(void 0, arguments);
+        }
+      };
+      var chain = middlewares.map(function (middleware) {
+        return middleware(middlewareAPI);
+      });
+      _dispatch = compose.apply(void 0, chain)(store.dispatch);
+      return _objectSpread2(_objectSpread2({}, store), {}, {
+        dispatch: _dispatch
+      });
+    };
+  };
+}
+
+function createThunkMiddleware(extraArgument) {
+  return function (_ref) {
+    var dispatch = _ref.dispatch,
+        getState = _ref.getState;
+    return function (next) {
+      return function (action) {
+        if (typeof action === 'function') {
+          return action(dispatch, getState, extraArgument);
+        }
+
+        return next(action);
+      };
+    };
+  };
+}
+
+var thunk = createThunkMiddleware();
+thunk.withExtraArgument = createThunkMiddleware;
+
+function getDefaultExportFromCjs (x) {
+	return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
+}
+
+function createCommonjsModule(fn, basedir, module) {
+	return module = {
+		path: basedir,
+		exports: {},
+		require: function (path, base) {
+			return commonjsRequire();
+		}
+	}, fn(module, module.exports), module.exports;
+}
+
+function commonjsRequire () {
+	throw new Error('Dynamic requires are not currently supported by @rollup/plugin-commonjs');
+}
+
+var actions = createCommonjsModule(function (module, exports) {
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ActionCreators = exports.ActionTypes = void 0;
+var ActionTypes = {
+  UNDO: '@@redux-undo/UNDO',
+  REDO: '@@redux-undo/REDO',
+  JUMP_TO_FUTURE: '@@redux-undo/JUMP_TO_FUTURE',
+  JUMP_TO_PAST: '@@redux-undo/JUMP_TO_PAST',
+  JUMP: '@@redux-undo/JUMP',
+  CLEAR_HISTORY: '@@redux-undo/CLEAR_HISTORY'
+};
+exports.ActionTypes = ActionTypes;
+var ActionCreators = {
+  undo: function undo() {
+    return {
+      type: ActionTypes.UNDO
+    };
+  },
+  redo: function redo() {
+    return {
+      type: ActionTypes.REDO
+    };
+  },
+  jumpToFuture: function jumpToFuture(index) {
+    return {
+      type: ActionTypes.JUMP_TO_FUTURE,
+      index: index
+    };
+  },
+  jumpToPast: function jumpToPast(index) {
+    return {
+      type: ActionTypes.JUMP_TO_PAST,
+      index: index
+    };
+  },
+  jump: function jump(index) {
+    return {
+      type: ActionTypes.JUMP,
+      index: index
+    };
+  },
+  clearHistory: function clearHistory() {
+    return {
+      type: ActionTypes.CLEAR_HISTORY
+    };
+  }
+};
+exports.ActionCreators = ActionCreators;
+});
+
+var helpers = createCommonjsModule(function (module, exports) {
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.parseActions = parseActions;
+exports.isHistory = isHistory;
+exports.includeAction = includeAction;
+exports.excludeAction = excludeAction;
+exports.combineFilters = combineFilters;
+exports.groupByActionTypes = groupByActionTypes;
+exports.newHistory = newHistory;
+
+// parseActions helper: takes a string (or array)
+//                      and makes it an array if it isn't yet
+function parseActions(rawActions) {
+  var defaultValue = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
+
+  if (Array.isArray(rawActions)) {
+    return rawActions;
+  } else if (typeof rawActions === 'string') {
+    return [rawActions];
+  }
+
+  return defaultValue;
+} // isHistory helper: check for a valid history object
+
+
+function isHistory(history) {
+  return typeof history.present !== 'undefined' && typeof history.future !== 'undefined' && typeof history.past !== 'undefined' && Array.isArray(history.future) && Array.isArray(history.past);
+} // includeAction helper: whitelist actions to be added to the history
+
+
+function includeAction(rawActions) {
+  var actions = parseActions(rawActions);
+  return function (action) {
+    return actions.indexOf(action.type) >= 0;
+  };
+} // excludeAction helper: blacklist actions from being added to the history
+
+
+function excludeAction(rawActions) {
+  var actions = parseActions(rawActions);
+  return function (action) {
+    return actions.indexOf(action.type) < 0;
+  };
+} // combineFilters helper: combine multiple filters to one
+
+
+function combineFilters() {
+  for (var _len = arguments.length, filters = new Array(_len), _key = 0; _key < _len; _key++) {
+    filters[_key] = arguments[_key];
+  }
+
+  return filters.reduce(function (prev, curr) {
+    return function (action, currentState, previousHistory) {
+      return prev(action, currentState, previousHistory) && curr(action, currentState, previousHistory);
+    };
+  }, function () {
+    return true;
+  });
+}
+
+function groupByActionTypes(rawActions) {
+  var actions = parseActions(rawActions);
+  return function (action) {
+    return actions.indexOf(action.type) >= 0 ? action.type : null;
+  };
+}
+
+function newHistory(past, present, future) {
+  var group = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : null;
+  return {
+    past: past,
+    present: present,
+    future: future,
+    group: group,
+    _latestUnfiltered: present,
+    index: past.length,
+    limit: past.length + future.length + 1
+  };
+}
+});
+
+var debug = createCommonjsModule(function (module, exports) {
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.set = set;
+exports.start = start;
+exports.end = end;
+exports.log = log;
+
+function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _nonIterableSpread(); }
+
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance"); }
+
+function _iterableToArray(iter) { if (Symbol.iterator in Object(iter) || Object.prototype.toString.call(iter) === "[object Arguments]") return Array.from(iter); }
+
+function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = new Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } }
+
+var __DEBUG__;
+
+var displayBuffer;
+var colors = {
+  prevState: '#9E9E9E',
+  action: '#03A9F4',
+  nextState: '#4CAF50'
+};
+/* istanbul ignore next: debug messaging is not tested */
+
+function initBuffer() {
+  displayBuffer = {
+    header: [],
+    prev: [],
+    action: [],
+    next: [],
+    msgs: []
+  };
+}
+/* istanbul ignore next: debug messaging is not tested */
+
+
+function printBuffer() {
+  var _displayBuffer = displayBuffer,
+      header = _displayBuffer.header,
+      prev = _displayBuffer.prev,
+      next = _displayBuffer.next,
+      action = _displayBuffer.action,
+      msgs = _displayBuffer.msgs;
+
+  if (console.group) {
+    var _console, _console2, _console3, _console4, _console5;
+
+    (_console = console).groupCollapsed.apply(_console, _toConsumableArray(header));
+
+    (_console2 = console).log.apply(_console2, _toConsumableArray(prev));
+
+    (_console3 = console).log.apply(_console3, _toConsumableArray(action));
+
+    (_console4 = console).log.apply(_console4, _toConsumableArray(next));
+
+    (_console5 = console).log.apply(_console5, _toConsumableArray(msgs));
+
+    console.groupEnd();
+  } else {
+    var _console6, _console7, _console8, _console9, _console10;
+
+    (_console6 = console).log.apply(_console6, _toConsumableArray(header));
+
+    (_console7 = console).log.apply(_console7, _toConsumableArray(prev));
+
+    (_console8 = console).log.apply(_console8, _toConsumableArray(action));
+
+    (_console9 = console).log.apply(_console9, _toConsumableArray(next));
+
+    (_console10 = console).log.apply(_console10, _toConsumableArray(msgs));
+  }
+}
+/* istanbul ignore next: debug messaging is not tested */
+
+
+function colorFormat(text, color, obj) {
+  return ["%c".concat(text), "color: ".concat(color, "; font-weight: bold"), obj];
+}
+/* istanbul ignore next: debug messaging is not tested */
+
+
+function start(action, state) {
+  initBuffer();
+
+  if (__DEBUG__) {
+    if (console.group) {
+      displayBuffer.header = ['%credux-undo', 'font-style: italic', 'action', action.type];
+      displayBuffer.action = colorFormat('action', colors.action, action);
+      displayBuffer.prev = colorFormat('prev history', colors.prevState, state);
+    } else {
+      displayBuffer.header = ['redux-undo action', action.type];
+      displayBuffer.action = ['action', action];
+      displayBuffer.prev = ['prev history', state];
+    }
+  }
+}
+/* istanbul ignore next: debug messaging is not tested */
+
+
+function end(nextState) {
+  if (__DEBUG__) {
+    if (console.group) {
+      displayBuffer.next = colorFormat('next history', colors.nextState, nextState);
+    } else {
+      displayBuffer.next = ['next history', nextState];
+    }
+
+    printBuffer();
+  }
+}
+/* istanbul ignore next: debug messaging is not tested */
+
+
+function log() {
+  if (__DEBUG__) {
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    displayBuffer.msgs = displayBuffer.msgs.concat([].concat(args, ['\n']));
+  }
+}
+/* istanbul ignore next: debug messaging is not tested */
+
+
+function set(debug) {
+  __DEBUG__ = debug;
+}
+});
+
+var reducer = createCommonjsModule(function (module, exports) {
+
+function _typeof(obj) { if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = undoable;
+
+var debug$1 = _interopRequireWildcard(debug);
+
+
+
+
+
+function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }
+
+function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _nonIterableSpread(); }
+
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance"); }
+
+function _iterableToArray(iter) { if (Symbol.iterator in Object(iter) || Object.prototype.toString.call(iter) === "[object Arguments]") return Array.from(iter); }
+
+function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = new Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } }
+
+function createHistory(state, ignoreInitialState) {
+  // ignoreInitialState essentially prevents the user from undoing to the
+  // beginning, in the case that the undoable reducer handles initialization
+  // in a way that can't be redone simply
+  var history = (0, helpers.newHistory)([], state, []);
+
+  if (ignoreInitialState) {
+    history._latestUnfiltered = null;
+  }
+
+  return history;
+} // insert: insert `state` into history, which means adding the current state
+//         into `past`, setting the new `state` as `present` and erasing
+//         the `future`.
+
+
+function insert(history, state, limit, group) {
+  var lengthWithoutFuture = history.past.length + 1;
+  debug$1.log('inserting', state);
+  debug$1.log('new free: ', limit - lengthWithoutFuture);
+  var past = history.past,
+      _latestUnfiltered = history._latestUnfiltered;
+  var isHistoryOverflow = limit && limit <= lengthWithoutFuture;
+  var pastSliced = past.slice(isHistoryOverflow ? 1 : 0);
+  var newPast = _latestUnfiltered != null ? [].concat(_toConsumableArray(pastSliced), [_latestUnfiltered]) : pastSliced;
+  return (0, helpers.newHistory)(newPast, state, [], group);
+} // jumpToFuture: jump to requested index in future history
+
+
+function jumpToFuture(history, index) {
+  if (index < 0 || index >= history.future.length) return history;
+  var past = history.past,
+      future = history.future,
+      _latestUnfiltered = history._latestUnfiltered;
+  var newPast = [].concat(_toConsumableArray(past), [_latestUnfiltered], _toConsumableArray(future.slice(0, index)));
+  var newPresent = future[index];
+  var newFuture = future.slice(index + 1);
+  return (0, helpers.newHistory)(newPast, newPresent, newFuture);
+} // jumpToPast: jump to requested index in past history
+
+
+function jumpToPast(history, index) {
+  if (index < 0 || index >= history.past.length) return history;
+  var past = history.past,
+      future = history.future,
+      _latestUnfiltered = history._latestUnfiltered;
+  var newPast = past.slice(0, index);
+  var newFuture = [].concat(_toConsumableArray(past.slice(index + 1)), [_latestUnfiltered], _toConsumableArray(future));
+  var newPresent = past[index];
+  return (0, helpers.newHistory)(newPast, newPresent, newFuture);
+} // jump: jump n steps in the past or forward
+
+
+function jump(history, n) {
+  if (n > 0) return jumpToFuture(history, n - 1);
+  if (n < 0) return jumpToPast(history, history.past.length + n);
+  return history;
+} // helper to dynamically match in the reducer's switch-case
+
+
+function actionTypeAmongClearHistoryType(actionType, clearHistoryType) {
+  return clearHistoryType.indexOf(actionType) > -1 ? actionType : !actionType;
+} // redux-undo higher order reducer
+
+
+function undoable(reducer) {
+  var rawConfig = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+  debug$1.set(rawConfig.debug);
+
+  var config = _objectSpread({
+    limit: undefined,
+    filter: function filter() {
+      return true;
+    },
+    groupBy: function groupBy() {
+      return null;
+    },
+    undoType: actions.ActionTypes.UNDO,
+    redoType: actions.ActionTypes.REDO,
+    jumpToPastType: actions.ActionTypes.JUMP_TO_PAST,
+    jumpToFutureType: actions.ActionTypes.JUMP_TO_FUTURE,
+    jumpType: actions.ActionTypes.JUMP,
+    neverSkipReducer: false,
+    ignoreInitialState: false,
+    syncFilter: false
+  }, rawConfig, {
+    initTypes: (0, helpers.parseActions)(rawConfig.initTypes, ['@@redux-undo/INIT']),
+    clearHistoryType: (0, helpers.parseActions)(rawConfig.clearHistoryType, [actions.ActionTypes.CLEAR_HISTORY])
+  }); // Allows the user to call the reducer with redux-undo specific actions
+
+
+  var skipReducer = config.neverSkipReducer ? function (res, action) {
+    for (var _len = arguments.length, slices = new Array(_len > 2 ? _len - 2 : 0), _key = 2; _key < _len; _key++) {
+      slices[_key - 2] = arguments[_key];
+    }
+
+    return _objectSpread({}, res, {
+      present: reducer.apply(void 0, [res.present, action].concat(slices))
+    });
+  } : function (res) {
+    return res;
+  };
+  var initialState;
+  return function () {
+    var state = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : initialState;
+    var action = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+    debug$1.start(action, state);
+    var history = state;
+
+    for (var _len2 = arguments.length, slices = new Array(_len2 > 2 ? _len2 - 2 : 0), _key2 = 2; _key2 < _len2; _key2++) {
+      slices[_key2 - 2] = arguments[_key2];
+    }
+
+    if (!initialState) {
+      debug$1.log('history is uninitialized');
+
+      if (state === undefined) {
+        var createHistoryAction = {
+          type: '@@redux-undo/CREATE_HISTORY'
+        };
+        var start = reducer.apply(void 0, [state, createHistoryAction].concat(slices));
+        history = createHistory(start, config.ignoreInitialState);
+        debug$1.log('do not set initialState on probe actions');
+        debug$1.end(history);
+        return history;
+      } else if ((0, helpers.isHistory)(state)) {
+        history = initialState = config.ignoreInitialState ? state : (0, helpers.newHistory)(state.past, state.present, state.future);
+        debug$1.log('initialHistory initialized: initialState is a history', initialState);
+      } else {
+        history = initialState = createHistory(state, config.ignoreInitialState);
+        debug$1.log('initialHistory initialized: initialState is not a history', initialState);
+      }
+    }
+
+    var res;
+
+    switch (action.type) {
+      case undefined:
+        return history;
+
+      case config.undoType:
+        res = jump(history, -1);
+        debug$1.log('perform undo');
+        debug$1.end(res);
+        return skipReducer.apply(void 0, [res, action].concat(slices));
+
+      case config.redoType:
+        res = jump(history, 1);
+        debug$1.log('perform redo');
+        debug$1.end(res);
+        return skipReducer.apply(void 0, [res, action].concat(slices));
+
+      case config.jumpToPastType:
+        res = jumpToPast(history, action.index);
+        debug$1.log("perform jumpToPast to ".concat(action.index));
+        debug$1.end(res);
+        return skipReducer.apply(void 0, [res, action].concat(slices));
+
+      case config.jumpToFutureType:
+        res = jumpToFuture(history, action.index);
+        debug$1.log("perform jumpToFuture to ".concat(action.index));
+        debug$1.end(res);
+        return skipReducer.apply(void 0, [res, action].concat(slices));
+
+      case config.jumpType:
+        res = jump(history, action.index);
+        debug$1.log("perform jump to ".concat(action.index));
+        debug$1.end(res);
+        return skipReducer.apply(void 0, [res, action].concat(slices));
+
+      case actionTypeAmongClearHistoryType(action.type, config.clearHistoryType):
+        res = createHistory(history.present, config.ignoreInitialState);
+        debug$1.log('perform clearHistory');
+        debug$1.end(res);
+        return skipReducer.apply(void 0, [res, action].concat(slices));
+
+      default:
+        res = reducer.apply(void 0, [history.present, action].concat(slices));
+
+        if (config.initTypes.some(function (actionType) {
+          return actionType === action.type;
+        })) {
+          debug$1.log('reset history due to init action');
+          debug$1.end(initialState);
+          return initialState;
+        }
+
+        if (history._latestUnfiltered === res) {
+          // Don't handle this action. Do not call debug.end here,
+          // because this action should not produce side effects to the console
+          return history;
+        }
+        /* eslint-disable-next-line no-case-declarations */
+
+
+        var filtered = typeof config.filter === 'function' && !config.filter(action, res, history);
+
+        if (filtered) {
+          // if filtering an action, merely update the present
+          var filteredState = (0, helpers.newHistory)(history.past, res, history.future, history.group);
+
+          if (!config.syncFilter) {
+            filteredState._latestUnfiltered = history._latestUnfiltered;
+          }
+
+          debug$1.log('filter ignored action, not storing it in past');
+          debug$1.end(filteredState);
+          return filteredState;
+        }
+        /* eslint-disable-next-line no-case-declarations */
+
+
+        var group = config.groupBy(action, res, history);
+
+        if (group != null && group === history.group) {
+          // if grouping with the previous action, only update the present
+          var groupedState = (0, helpers.newHistory)(history.past, res, history.future, history.group);
+          debug$1.log('groupBy grouped the action with the previous action');
+          debug$1.end(groupedState);
+          return groupedState;
+        } // If the action wasn't filtered or grouped, insert normally
+
+
+        history = insert(history, res, config.limit, group);
+        debug$1.log('inserted new state into history');
+        debug$1.end(history);
+        return history;
+    }
+  };
+}
+});
+
+var lib = createCommonjsModule(function (module, exports) {
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "ActionTypes", {
+  enumerable: true,
+  get: function get() {
+    return actions.ActionTypes;
+  }
+});
+Object.defineProperty(exports, "ActionCreators", {
+  enumerable: true,
+  get: function get() {
+    return actions.ActionCreators;
+  }
+});
+Object.defineProperty(exports, "parseActions", {
+  enumerable: true,
+  get: function get() {
+    return helpers.parseActions;
+  }
+});
+Object.defineProperty(exports, "isHistory", {
+  enumerable: true,
+  get: function get() {
+    return helpers.isHistory;
+  }
+});
+Object.defineProperty(exports, "includeAction", {
+  enumerable: true,
+  get: function get() {
+    return helpers.includeAction;
+  }
+});
+Object.defineProperty(exports, "excludeAction", {
+  enumerable: true,
+  get: function get() {
+    return helpers.excludeAction;
+  }
+});
+Object.defineProperty(exports, "combineFilters", {
+  enumerable: true,
+  get: function get() {
+    return helpers.combineFilters;
+  }
+});
+Object.defineProperty(exports, "groupByActionTypes", {
+  enumerable: true,
+  get: function get() {
+    return helpers.groupByActionTypes;
+  }
+});
+Object.defineProperty(exports, "newHistory", {
+  enumerable: true,
+  get: function get() {
+    return helpers.newHistory;
+  }
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function get() {
+    return _reducer["default"];
+  }
+});
+
+
+
+
+
+var _reducer = _interopRequireDefault(reducer);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+});
+
+const undoable = /*@__PURE__*/getDefaultExportFromCjs(lib);
+
+const inicialHistState = {
+  currentTabIndex: {},
+  currentRecordIndex: {},
+  changes: {},
+  collapsedGroups: {},
+  newRecordIndex: {}
+};
+const inicialNonHistState = {
+  dataLoading: {},
+  invalidFields: {},
+  visibleButtons: {
+    previousVisible: true,
+    nextVisible: true,
+    addVisible: true,
+    removeVisible: true,
+    saveVisible: true,
+    cancelVisible: true,
+    reloadVisible: 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, 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", { title: "Remover " + du.unitLabel, 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,
+      buttonProps.addVisible ? index.h("ez-button", { label: "Criar " + du.unitLabel, 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";
+})(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) }));
+  }
+};
+
+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;
+  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._dataUnits = [];
+    this._requiredFieldsByDU = {};
+  }
+  async validate() {
+    for (let i = 0; i < this._dataUnits.length; i++) {
+      if (!this._dataUnits[i].validateRecords()) {
+        return false;
+      }
+    }
+  }
+  async getChanges() {
+    let allChanges = [];
+    for (let i = 0; i < this._dataUnits.length; i++) {
+      const duChanges = this._dataUnits[i].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) {
+    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, unitLabel, records, cardinality } = dataUnit;
+      if (!(dataUnit instanceof DataUnit.DataUnit)) {
+        dataUnit = new DataUnit.DataUnit(name, unitLabel, cardinality);
+        this._dataUnits.push(dataUnit);
+        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); }
+};
+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 })));
+  }
+};
+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); }
+};
+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"]
+  }; }
+};
+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;
+  }
+}
+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"]
+  }; }
+};
+EzTextArea.style = ezTextAreaCss;
+
+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"]
+  }; }
+};
+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);
+  }
+};
+PlaceHolder.style = placeHolderCss;
+
+exports.ez_button = EzButton;
+exports.ez_calendar = EzCalendar;
+exports.ez_check = EzCheck;
+exports.ez_collapsable_box = EzCollapsableBox;
+exports.ez_combo_box = EzComboBox;
+exports.ez_date_input = EzDateInput;
+exports.ez_form = EzForm;
+exports.ez_icon = EzIcon;
+exports.ez_popover = EzPopover;
+exports.ez_search = EzSearch;
+exports.ez_tabselector = EzTabselector;
+exports.ez_text_area = EzTextArea;
+exports.ez_text_input = EzTextInput;
+exports.place_holder = PlaceHolder;