@sankhyalabs/ezui 1.1.141 → 1.1.144

package/dist/custom-elements/index.js

@@ -1,6 +1,6 @@
 import { HTMLElement as HTMLElement$1, createEvent, h, forceUpdate, Host, proxyCustomElement } from '@stencil/core/internal/client';
 export { setAssetPath, setPlatformOptions } from '@stencil/core/internal/client';
-import { FloatingManager, DateUtils, TimeFormatter, UserInterface, Action, ApplicationContext, DataUnitAction, DataUnit, NumberUtils, DataType, StringUtils, MaskFormatter } from '@sankhyalabs/core';
+import { FloatingManager, DateUtils, TimeFormatter, UserInterface, Action, WaitingChangeException, ApplicationContext, DataUnitAction, DataUnit, NumberUtils, DataType, StringUtils, MaskFormatter } from '@sankhyalabs/core';
 import { UserInterface as UserInterface$1, SortMode } from '@sankhyalabs/core/dist/dataunit/metadata/UnitMetadata';
 
 const ezApplicationCss = "";
@@ -23,7 +23,7 @@ let EzApplication$1 = class extends HTMLElement$1 {
   static get style() { return ezApplicationCss; }
 };
 
-const ezButtonCss = ":host{--ez-button--min-width:100px;--ez-button--height:42px;--ez-button__icon--width:18px;--ez-button__inline__icon--padding:12px;--ez-button--padding-top:var(--space--medium, 12px);--ez-button--padding-bottom:var(--space--medium, 12px);--ez-button--padding-right:var(--space--large, 24px);--ez-button--padding-left:var(--space--large, 24px);--ez-button--color:var(--title--primary, #FFF);--ez-button--font-size:var(--text--medium, 14px);--ez-button--font-family:var(--font-pattern, Arial);--ez-button--font-weight:var(--text-weight--large);--ez-button--background-color:var(--background--medium, #c0c0c0);--ez-button--border-radius:var(--border--radius-large, 12px);--ez-button--border:none;--ez-button--hover-color:var(--color--primary-600);--ez-button--hover--background-color:var(--background--medium, var(--ez-button--background-color));--ez-button--disabled-color:var(--text--disable);--ez-button--disabled--background-color:var(--color--disable-secondary);--ez-button--focus--border:var(--border--xlarge, 4px solid) var(--color--primary-300);--ez-button--focus--box-shadow:none;--ez-button--active-color:var(--color--primary-700);--ez-button--active--background-color:var(--background--strong);--ez-button--link-color:var(--color--primary, '#008561');--ez-button--link--hover-color:var(--color--primary-700, '#1C1D22');--ez-button--link--small--font-size:var(--text--small, 12px);--ez-button--link--medium--font-size:var(--text--medium, 14px);--ez-button--link--large--font-size:var(--text--large, 16px)}ez-icon{--ez-icon--color:inherit}button{display:flex;align-items:center;justify-content:center;margin:0;cursor:pointer;transition:background-color 0.2s linear;min-width:var(--ez-button--min-width);height:var(--ez-button--height);font-family:var(--ez-button--font-family);font-size:var(--ez-button--font-size);font-weight:var(--ez-button--font-weight);padding:var(--ez-button--padding-top) var(--ez-button--padding-right) var(--ez-button--padding-bottom) var(--ez-button--padding-left);border-radius:var(--ez-button--border-radius);background-color:var(--ez-button--background-color);color:var(--ez-button--color);fill:var(--ez-button--color);border:var(--ez-button--border)}button:focus{outline:var(--ez-button--focus--border);box-shadow:var(--ez-button--focus--box-shadow)}button:hover{outline:none;background-color:var(--ez-button--hover--background-color);color:var(--ez-button--hover-color);fill:var(--ez-button--hover-color);--ez-icon--color:var(--ez-button--hover-color)}button:active{outline:none;box-shadow:none;background-color:var(--ez-button--active--background-color);color:var(--ez-button--active-color);fill:var(--ez-button--active-color);--ez-icon--color:var(--ez-button--active-color)}button:disabled{background-color:var(--ez-button--disabled--background-color);color:var(--ez-button--disabled-color);fill:var(--ez-button--disabled-color);border:none;--ez-icon--color:var(--ez-button--disabled-color);cursor:no-drop}.small{height:32px;--ez-button--font-size:var(--text--small, 12px)}.medium{height:42px}.large{height:46px}.btn-icon{padding:0px}.btn-icon--medium{width:42px;min-width:42px;height:42px}.btn-icon--small{width:32px;min-width:32px;height:32px}.btn-icon--large{width:46px;min-width:46px;height:46px}.label-icon{display:flex;flex-direction:column;align-items:center;color:var(--ez-button--color)}.label-icon:hover{color:var(--ez-button--hover-color);fill:var(--ez-button--hover-color);--ez-icon--color:var(--ez-button--hover-color)}.label-icon:active{color:var(--ez-button--active-color);fill:var(--ez-button--active-color);--ez-icon--color:var(--ez-button--active-color)}.label-icon label{max-width:150px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer;font-family:var(--ez-button--font-family);font-size:var(--ez-button--font-size);font-weight:var(--ez-button--font-weight);user-select:none}button:disabled+label{max-width:150px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer;font-family:var(--ez-button--font-family);font-size:var(--ez-button--font-size);font-weight:var(--ez-button--font-weight);color:var(--ez-button--disabled-color);cursor:no-drop}div.label-icon{cursor:pointer}div.label-icon,button:disabled{cursor:no-drop}a{font-family:var(--ez-button--font-family);font-weight:var(--ez-button--font-weight);color:var(--ez-button--link-color);cursor:pointer;display:flex;align-items:center;justify-content:center;}a:hover{color:var(--ez-button--link--hover-color)}a.small{font-size:var(--ez-button--link--small--font-size);line-height:var(--ez-button--link--small--font-size)}a.medium{font-size:var(--ez-button--link--medium--font-size);line-height:var(--ez-button--link--medium--font-size)}a.large{font-size:var(--ez-button--link--large--font-size);line-height:var(--ez-button--link--large--font-size)}";
+const ezButtonCss = ":host{--ez-button--min-width:100px;--ez-button--height:42px;--ez-button__icon--width:18px;--ez-button__inline__icon--padding:12px;--ez-button--padding-top:var(--space--medium, 12px);--ez-button--padding-bottom:var(--space--medium, 12px);--ez-button--padding-right:var(--space--large, 24px);--ez-button--padding-left:var(--space--large, 24px);--ez-button--color:var(--title--primary, #FFF);--ez-button--font-size:var(--text--medium, 14px);--ez-button--font-family:var(--font-pattern, Arial);--ez-button--font-weight:var(--text-weight--large);--ez-button--background-color:var(--background--medium, #c0c0c0);--ez-button--border-radius:var(--border--radius-large, 12px);--ez-button--border:none;--ez-button--hover-color:var(--color--primary-600);--ez-button--hover--background-color:var(--background--medium, var(--ez-button--background-color));--ez-button--disabled-color:var(--text--disable);--ez-button--disabled--background-color:var(--color--disable-secondary);--ez-button--focus--border:var(--border--xlarge, 4px solid) var(--color--primary-300);--ez-button--focus--box-shadow:none;--ez-button--active-color:var(--color--primary-700);--ez-button--active--background-color:var(--background--strong);--ez-button--link-color:var(--color--primary, '#008561');--ez-button--link--hover-color:var(--color--primary-700, '#1C1D22');--ez-button--link--small--font-size:var(--text--small, 12px);--ez-button--link--medium--font-size:var(--text--medium, 14px);--ez-button--link--large--font-size:var(--text--large, 16px)}ez-icon{--ez-icon--color:inherit}button{display:flex;align-items:center;justify-content:center;margin:0;cursor:pointer;transition:background-color 0.2s linear;min-width:var(--ez-button--min-width);height:var(--ez-button--height);font-family:var(--ez-button--font-family);font-size:var(--ez-button--font-size);font-weight:var(--ez-button--font-weight);padding:var(--ez-button--padding-top) var(--ez-button--padding-right) var(--ez-button--padding-bottom) var(--ez-button--padding-left);border-radius:var(--ez-button--border-radius);background-color:var(--ez-button--background-color);color:var(--ez-button--color);fill:var(--ez-button--color);border:var(--ez-button--border)}button:focus{outline:var(--ez-button--focus--border);box-shadow:var(--ez-button--focus--box-shadow)}button:hover{outline:none;background-color:var(--ez-button--hover--background-color);color:var(--ez-button--hover-color);fill:var(--ez-button--hover-color);--ez-icon--color:var(--ez-button--hover-color)}button:focus{outline:none;outline:var(--ez-button--focus--border);box-shadow:var(--ez-button--focus--box-shadow)}button:active{outline:none;box-shadow:none;background-color:var(--ez-button--active--background-color);color:var(--ez-button--active-color);fill:var(--ez-button--active-color);--ez-icon--color:var(--ez-button--active-color)}button:disabled{background-color:var(--ez-button--disabled--background-color);color:var(--ez-button--disabled-color);fill:var(--ez-button--disabled-color);border:none;--ez-icon--color:var(--ez-button--disabled-color);cursor:no-drop}.small{height:32px;--ez-button--font-size:var(--text--small, 12px)}.medium{height:42px}.large{height:46px}.btn-icon{padding:0px}.btn-icon--medium{width:42px;min-width:42px;height:42px}.btn-icon--small{width:32px;min-width:32px;height:32px}.btn-icon--large{width:46px;min-width:46px;height:46px}.label-icon{display:flex;flex-direction:column;align-items:center;color:var(--ez-button--color)}.label-icon:hover{color:var(--ez-button--hover-color);fill:var(--ez-button--hover-color);--ez-icon--color:var(--ez-button--hover-color)}.label-icon:active{color:var(--ez-button--active-color);fill:var(--ez-button--active-color);--ez-icon--color:var(--ez-button--active-color)}.label-icon label{max-width:150px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer;font-family:var(--ez-button--font-family);font-size:var(--ez-button--font-size);font-weight:var(--ez-button--font-weight);user-select:none}button:disabled+label{max-width:150px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer;font-family:var(--ez-button--font-family);font-size:var(--ez-button--font-size);font-weight:var(--ez-button--font-weight);color:var(--ez-button--disabled-color);cursor:no-drop}div.label-icon{cursor:pointer}div.label-icon,button:disabled{cursor:no-drop}a{font-family:var(--ez-button--font-family);font-weight:var(--ez-button--font-weight);color:var(--ez-button--link-color);cursor:pointer;display:flex;align-items:center;justify-content:center;}a:hover{color:var(--ez-button--link--hover-color)}a.small{font-size:var(--ez-button--link--small--font-size);line-height:var(--ez-button--link--small--font-size)}a.medium{font-size:var(--ez-button--link--medium--font-size);line-height:var(--ez-button--link--medium--font-size)}a.large{font-size:var(--ez-button--link--large--font-size);line-height:var(--ez-button--link--large--font-size)}";
 
 let EzButton$1 = class extends HTMLElement$1 {
   constructor() {
@@ -312,6 +312,45 @@ let EzCalendar$1 = class extends HTMLElement$1 {
   static get style() { return ezCalendarCss; }
 };
 
+const ezCardItemCss = ":host{--ez-card-item--font-size:var(--text--medium, 14px);--ez-card-item--font-family:var(--font-pattern, Arial);--ez-card-item--font-weight:var(--text-weight--medium, 400);--ez-card-item--font-weight-large:var(--text-weight--large, 600);--ez-card-item--color:var(--title--primary, #626e82);--ez-card-item__detail-label--color:var(--text--secondary, #A2ABB9);--ez-card-item__detail--padding-bottom:var(--space--extra-small, 3px);--ez-card-item__title--padding-bottom:var(--space--extra-small, 3px);--ez-card-item__highlight--color:var(--color--primary-300, #E2F4EF);width:100%;display:flex;cursor:pointer}.card-item{display:flex;flex-direction:column;width:100%;cursor:pointer;padding:12px;z-index:0;position:relative}.card-item:hover{background:#F0F3F7;border-radius:12px}.card-item__title{line-height:18px;cursor:pointer;font-size:var(--ez-card-item--font-size);font-family:var(--ez-card-item--font-family);font-weight:var(--ez-card-item--font-weight-large);color:var(--ez-card-item--color);padding-bottom:var(--ez-card-item__title--padding-bottom)}.card-item__details{display:flex;cursor:pointer;justify-content:space-between;gap:var(--space--small, 6px)}.card-item__details-left{cursor:pointer;width:50%}.card-item__details-right{width:50%;cursor:pointer}.card-item__detail:not(:last-child){cursor:pointer;padding-bottom:var(--ez-card-item__detail--padding-bottom)}.card-item__detail-label{cursor:pointer;font-size:var(--ez-card-item--font-size);font-family:var(--ez-card-item--font-family);font-weight:var(--ez-card-item--font-weight);color:var(--ez-card-item__detail-label--color)}.card-item__detail-value{cursor:pointer;font-size:var(--ez-card-item--font-size);font-family:var(--ez-card-item--font-family);font-weight:var(--ez-card-item--font-weight);color:var(--ez-card-item--color)}.card-item__highlight{position:relative;border-radius:8px;z-index:-1;background-color:var(--ez-card-item__highlight--color);outline:2px solid var(--ez-card-item__highlight--color);box-shadow:-4px 0px 0px 0px var(--ez-card-item__highlight--color), \n               4px 0px 0px 0px var(--ez-card-item__highlight--color)}";
+
+let EzCardItem$1 = class extends HTMLElement$1 {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.ezClick = createEvent(this, "ezClick", 7);
+  }
+  componentWillRender() {
+    this.createDetailList();
+  }
+  createDetailList() {
+    var _a, _b, _c;
+    this._details = { detailsLeft: [], detailsRight: [] };
+    let cont = 0;
+    if ((_a = this.item) === null || _a === void 0 ? void 0 : _a.details) {
+      for (const attribute in this.item.details) {
+        cont < 3 ?
+          this._details.detailsLeft.push({ label: attribute, value: (_b = this.item.details[attribute]) === null || _b === void 0 ? void 0 : _b.toString() }) :
+          this._details.detailsRight.push({ label: attribute, value: (_c = this.item.details[attribute]) === null || _c === void 0 ? void 0 : _c.toString() });
+        cont++;
+      }
+    }
+  }
+  buildDetailContent(detail) {
+    return h("div", { class: "card-item__detail" }, h("label", { class: "card-item__detail-label" }, detail.label), ": ", h("label", { class: "card-item__detail-value", innerHTML: detail.value }));
+  }
+  render() {
+    return (h(Host, null, this.item &&
+      h("div", { class: "card-item", onClick: () => { this.ezClick.emit(this.item); } }, h("label", { class: "card-item__title", innerHTML: this.item.key + ' - ' + this.item.title }), h("div", { class: "card-item__details" }, h("div", { class: "card-item__details-left" }, this._details.detailsLeft.map(detail => {
+        return this.buildDetailContent(detail);
+      })), h("div", { class: "card-item__details-right" }, this._details.detailsRight.map(detail => {
+        return this.buildDetailContent(detail);
+      }))))));
+  }
+  static get style() { return ezCardItemCss; }
+};
+
 const ezCheckCss = ":host{--ez-check--box--width:18px;--ez-check--box--height:18px;--ez-check--width:calc(var(--ez-check--box--width) + 14px);--ez-check--height:calc(var(--ez-check--box--width) + 14px);--ez-check--border-radius:var(--border--radius-small);--ez-check--checked--background-color:var(--color--primary-200);--ez-check--focus--background-color:var(--color--strokes, #FFFFFF);--ez-check--hover--background-color:var(--background--medium);--ez-check--checked--disabled--background-color:var(--color--disable-secondary);--ez-check--border:var(--border--medium) var(--title--primary);--ez-check--disabled--border:var(--border--medium) var(--color--strokes);--ez-check--checked--border:var(--border--medium) var(--color--primary);--ez-check--checked--hover--background-color:var(--color--primary-200);--ez-check--checked--focus--background-color:var(--color--primary-300, #FFFFFF);--ez-check--check--image:url('data:image/svg+xml;utf8,<svg width=\"8\" height=\"7\" viewBox=\"0 0 8 7\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M7.70002 0.398999L7.48502 0.207997C7.31524 0.0598858 7.09376 -0.0150438 6.86894 -0.000430025C6.64411 0.0141838 6.43419 0.117153 6.28502 0.285997L2.70002 4.332L1.61802 3.384C1.44837 3.23576 1.22697 3.16067 1.00214 3.17509C0.77732 3.18952 0.567332 3.2923 0.418019 3.461L0.229019 3.674C0.0752361 3.84797 -0.00437434 4.07521 0.00721192 4.30713C0.0187982 4.53904 0.120661 4.75722 0.291019 4.915L2.27402 6.762C2.35832 6.8432 2.45842 6.90618 2.56811 6.94702C2.67779 6.98787 2.79471 7.00571 2.91159 6.99942C3.02846 6.99314 3.14279 6.96287 3.24747 6.91049C3.35214 6.85812 3.44492 6.78477 3.52002 6.695L7.79102 1.638C7.94063 1.46048 8.01486 1.23149 7.99786 0.999963C7.98085 0.768436 7.87396 0.552749 7.70002 0.398999Z\"/></svg>');--ez-check--check--background-color:var(--color--primary);--ez-check--check--disabled--background-color:var(--color--strokes);--ez-switch--slider--width:34px;--ez-switch--slider--height:14px;--ez-switch--pin--width:19px;--ez-switch--pin--height:19px;--ez-switch--focus--width:32px;--ez-switch--focus--height:32px;--ez-switch--background-color:var(--color--strokes);--ez-switch--disabled--background-color:var(--color--disable-secondary);--ez-switch--disabled--checked--background-color:var(--color--primary-300);--ez-switch--checked--background-color:var(--color--primary);--ez-switch--pin--background-color:var(--background--xlight);--ez-switch--pin--disabled--background-color:var(--color--disable-primary);--ez-switch--pin--checked--background-color:var(--background--xlight);--ez-switch--pin--checked--disabled--background-color:#E8F7F4;--ez-switch--pin--focus--background-color:var(--text--disable);--ez-switch--pin--checked--focus--background-color:var(--color--primary);--ez-switch--pin--border-color:var(--text--primary);--ez-switch--pin--disabled--border-color:var(--text--secondary);--ez-check--label--font-size:var(--text--medium, 14px);--ez-check--label--font-family:var(--font-pattern, Arial);--ez-check--label--color:var(--title--primary, #000);--ez-check--label--disabled--color:var(--text--disable, #AFB6C0);display:flex;width:100%;align-items:center;margin:0}input.regularMode{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;box-sizing:border-box;-webkit-appearance:none;appearance:none;cursor:pointer;border-radius:50%;position:relative;width:var(--ez-check--width);height:var(--ez-check--height)}input.regularMode:enabled:hover{background-color:var(--ez-check--hover--background-color)}input.regularMode:enabled:focus{outline:none;background-color:var(--ez-check--focus--background-color)}input.regularMode:disabled{cursor:auto;background:none}input.regularMode::before{box-sizing:border-box;content:\"\";display:block;width:var(--ez-check--box--width);height:var(--ez-check--box--height);border-radius:var(--ez-check--border-radius);border:var(--ez-check--border)}input.regularMode:disabled::before{border:var(--ez-check--disabled--border)}input.regularMode:checked:enabled:hover{background-color:var(--ez-check--checked--hover--background-color)}input.regularMode:checked:enabled:focus{background-color:var(--ez-check--checked--focus--background-color)}input.regularMode:checked::before{border:var(--ez-check--checked--border);background-color:var(--ez-check--checked--background-color)}input.regularMode:checked:disabled:before{border:var(--ez-check--disabled--border);background-color:var(--ez-check--checked--disabled--background-color)}input.regularMode:checked::after{display:flex;position:absolute;content:\"\";background-color:var(--ez-check--check--background-color);width:8px;height:7px;-webkit-mask-image:var(--ez-check--check--image);mask-image:var(--ez-check--check--image)}input.regularMode:checked:disabled::after{background-color:var(--ez-check--check--disabled--background-color)}input.switchMode{flex-shrink:0;-webkit-appearance:none;appearance:none;position:relative;outline:none;cursor:pointer;border-radius:20px;border:var(--border--small, 1px solid) var(--ez-switch--pin--border-color, #626e82);transition:background-color var(--transition);width:var(--ez-switch--slider--width);height:var(--ez-switch--slider--height);background-color:var(--ez-switch--background-color)}input.switchMode:disabled{background-color:var(--ez-switch--disabled--background-color);border:var(--border--small, 1px solid) var(--ez-switch--pin--disabled--border-color, #a2abb9)}input.switchMode:checked:disabled{background-color:var(--ez-switch--disabled--checked--background-color)}input.switchMode::after{content:\"\";display:block;position:absolute;box-shadow:var(--shadow);transition:transform var(--transition);transition:background-color var(--transition);transition:border-color var(--transition);transform:translateX(-2px) translateY(-4px);border-radius:50%;border:var(--border--small, 1px solid) var(--ez-switch--pin--border-color, #626e82);width:var(--ez-switch--pin--width);height:var(--ez-switch--pin--height);background-color:var(--ez-switch--pin--background-color)}input.switchMode:disabled::after{background-color:var(--ez-switch--pin--disabled--background-color);border:var(--border--small, 1px solid) var(--ez-switch--pin--disabled--border-color, #a2abb9)}input.switchMode:checked{transition:background-color var(--transition), border var(--transition);background-color:var(--ez-switch--checked--background-color);border:var(--border--small, 1px solid) var(--color--primary, #008561)}input.switchMode::before{display:block;content:\"\";display:block;position:absolute;border-radius:50%;opacity:0;width:var(--ez-switch--focus--width);height:var(--ez-switch--focus--height);top:calc((var(--ez-switch--slider--height) - var(--ez-switch--focus--height)) / 2);left:calc((var(--ez-switch--pin--width) - var(--ez-switch--focus--width) - 2px) / 2);background-color:var(--ez-switch--pin--focus--background-color)}input.switchMode:focus::before{opacity:0.24;transition:opacity var(--transition)}input.switchMode:checked:focus::before{background-color:var(--ez-switch--pin--checked--focus--background-color);transform:translateX(calc(var(--ez-switch--slider--width) - var(--ez-switch--pin--width) + 2px))}input.switchMode:checked::after{transition:transform var(--transition);transition:background-color var(--transition);transition:border-color var(--transition);transform:translateX(calc(var(--ez-switch--slider--width) - var(--ez-switch--pin--width))) translateY(-4px);box-shadow:var(--shadow);background-color:var(--ez-switch--pin--checked--background-color);border:var(--border--small, 1px solid) var(--color--primary, #008561)}input.switchMode:checked:disabled::after{background-color:var(--ez-switch--pin--checked--disabled--background-color)}.label{flex-shrink:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--ez-check--label--color);text-shadow:var(--text-shadow);font-size:var(--ez-check--label--font-size);font-family:var(--ez-check--label--font-family);cursor:default;padding-left:var(--space--small)}.label--disabled{color:var(--ez-check--label--disabled--color)}";
 
 let EzCheck$1 = class extends HTMLElement$1 {
@@ -479,7 +518,7 @@ let EzChip$1 = class extends HTMLElement$1 {
   static get style() { return ezChipCss; }
 };
 
-const ezCollapsibleBoxCss = ":host{--ez-collapsible-box--font-size:var(--title--medium, 14px);--ez-collapsible-box--font-family:var(--font-pattern, Arial);--ez-collapsible-box--font-weight:var(--text-weight--large, 600);--ez-collapsible-box--color:var(--title--primary);--ez-collapsible-box--focus--color:var(--color--primary-600);--ez-collapsible-box__icon--color:var(--ez-collapsible-box--color);--ez-collapsible-box__header--padding-top:0px;--ez-collapsible-box__header--padding-bottom:0px;--ez-collapsible-box__header--padding-right:0px;--ez-collapsible-box__header--padding-left:0px;display:flex;flex-wrap:wrap;width:100%}ez-icon{--ez-icon--color:inherit}.collapsible-box{display:flex;flex-direction:column;width:100%}.collapsible-box__header{display:flex;box-sizing:border-box;padding-top:var(--ez-collapsible-box__header--padding-top);padding-bottom:var(--ez-collapsible-box__header--padding-bottom);padding-right:var(--ez-collapsible-box__header--padding-right);padding-left:var(--ez-collapsible-box__header--padding-left)}.collapsible-box__title{position:relative;width:auto;display:flex;box-sizing:border-box;align-items:center;outline:none;border:none;background-color:unset;cursor:pointer;padding:0px;text-align:left;color:var(--ez-collapsible-box--color);--ez-icon--color:var(--ez-collapsible-box__icon--color);margin-bottom:var(--space--medium, 12px)}.collapsible-box__title:focus{color:var(--ez-collapsible-box--focus--color);--ez-icon--color:var(--ez-collapsible-box--focus--color)}.collapsible-box__label{white-space:nowrap;overflow:hidden;cursor:pointer;text-overflow:ellipsis;box-sizing:border-box;margin-left:6px;font-family:var(--ez-collapsible-box--font-family);font-size:var(--ez-collapsible-box--font-size);font-weight:var(--ez-collapsible-box--font-weight)}.collapsible-box__icon{transform:rotate(90deg) translate(0px, 14%);transition:transform var(--transition)}.collapsible-box__icon--collapsed{transform:rotate(0deg) translate(-14%, 0px)}.collapsible-box__title--icon-right{flex-direction:row-reverse}.collapsible-box__title--icon-right .collapsible-box__icon{transform:rotate(90deg) translate(0px, -14%)}.collapsible-box__title--icon-right .collapsible-box__icon--collapsed{transform:rotate(0deg) translate(14%, 0px)}.collapsible-box__title--icon-right .collapsible-box__label{margin-left:0px;margin-right:6px}.collapsible-box__title--stretched{width:100%;justify-content:space-between}.collapsible-box__content{display:flex;flex-wrap:wrap;width:100%;height:0px;max-height:0px;opacity:0;overflow:hidden;transition:all var(--transition, 0.5s)}.collapsible-box__content--show{height:100%;max-height:none;opacity:1;overflow:visible;transition:all var(--transition, 0.5s)}.font--x-small{font-size:10px}.font--small{font-size:12px}.font--medium{font-size:14px}.font--large{font-size:16px}.font--x-large{font-size:20px}";
+const ezCollapsibleBoxCss = ":host{--ez-collapsible-box--font-size:var(--title--medium, 14px);--ez-collapsible-box--font-family:var(--font-pattern, Arial);--ez-collapsible-box--font-weight:var(--text-weight--large, 600);--ez-collapsible-box--color:var(--title--primary);--ez-collapsible-box--focus--color:var(--color--primary-600);--ez-collapsible-box__icon--color:var(--ez-collapsible-box--color);--ez-collapsible-box__header--padding-top:0px;--ez-collapsible-box__header--padding-bottom:0px;--ez-collapsible-box__header--padding-right:0px;--ez-collapsible-box__header--padding-left:0px;display:flex;flex-wrap:wrap;width:100%}ez-icon{--ez-icon--color:inherit}.collapsible-box{display:flex;flex-direction:column;width:100%}.collapsible-box__header{display:flex;box-sizing:border-box;padding-top:var(--ez-collapsible-box__header--padding-top);padding-bottom:var(--ez-collapsible-box__header--padding-bottom);padding-right:var(--ez-collapsible-box__header--padding-right);padding-left:var(--ez-collapsible-box__header--padding-left)}.collapsible-box__title{position:relative;width:auto;display:flex;box-sizing:border-box;align-items:center;outline:none;border:none;background-color:unset;cursor:pointer;padding:0px;text-align:left;color:var(--ez-collapsible-box--color);--ez-icon--color:var(--ez-collapsible-box__icon--color);margin-bottom:var(--space--medium, 12px)}.collapsible-box__title:focus{color:var(--ez-collapsible-box--focus--color);--ez-icon--color:var(--ez-collapsible-box--focus--color)}.collapsible-box__label{white-space:nowrap;overflow:hidden;cursor:pointer;text-overflow:ellipsis;box-sizing:border-box;margin-left:6px;font-family:var(--ez-collapsible-box--font-family);font-size:var(--ez-collapsible-box--font-size);font-weight:var(--ez-collapsible-box--font-weight)}.collapsible-box__icon{transform:rotate(90deg) translate(0px, 14%);transition:transform var(--transition)}.collapsible-box__icon--collapsed{transform:rotate(0deg) translate(-14%, 0px)}.collapsible-box__title--icon-right{flex-direction:row-reverse}.collapsible-box__title--icon-right .collapsible-box__icon{transform:rotate(90deg) translate(0px, -14%)}.collapsible-box__title--icon-right .collapsible-box__icon--collapsed{transform:rotate(0deg) translate(14%, 0px)}.collapsible-box__title--icon-right .collapsible-box__label{margin-left:0px;margin-right:6px}.collapsible-box__title--stretched{width:100%;justify-content:space-between}.collapsible-box__title--no-margin{margin-bottom:0}.collapsible-box__content{display:flex;flex-wrap:wrap;width:100%;height:0px;max-height:0px;opacity:0;overflow:hidden;transition:all var(--transition, 0.5s)}.collapsible-box__content--show{height:100%;max-height:none;opacity:1;overflow:visible;transition:all var(--transition, 0.5s)}.font--x-small{font-size:10px}.font--small{font-size:12px}.font--medium{font-size:14px}.font--large{font-size:16px}.font--x-large{font-size:20px}";
 
 let EzCollapsibleBox$1 = class extends HTMLElement$1 {
   constructor() {
@@ -526,7 +565,8 @@ let EzCollapsibleBox$1 = class extends HTMLElement$1 {
   render() {
     return (h("div", { class: "collapsible-box" }, h("div", { class: "collapsible-box__header" }, h("button", { onClick: () => this.showHide(), class: "collapsible-box__title" +
         (this.iconPlacement === "right" ? " collapsible-box__title--icon-right" : "") +
-        (this.stretchTitle ? " collapsible-box__title--stretched" : "") }, h("ez-icon", { slot: "icon", "icon-name": "chevron-right", size: this.getHeaderSize(), class: "collapsible-box__icon collapsible-box__icon--" + this.getHeaderSize() + (this.value ? " collapsible-box__icon--collapsed" : "") }), h("label", { class: "collapsible-box__label font--" + this.getHeaderSize(), title: this.label }, this.label))), h("div", { class: "collapsible-box__content" + (this.value ? "" : " collapsible-box__content--show") }, h("slot", null))));
+        (this.stretchTitle ? " collapsible-box__title--stretched" : "") +
+        (this.value ? " collapsible-box__title--no-margin" : "") }, h("ez-icon", { slot: "icon", "icon-name": "chevron-right", size: this.getHeaderSize(), class: "collapsible-box__icon collapsible-box__icon--" + this.getHeaderSize() + (this.value ? " collapsible-box__icon--collapsed" : "") }), h("label", { class: "collapsible-box__label font--" + this.getHeaderSize(), title: this.label }, this.label))), h("div", { class: "collapsible-box__content" + (this.value ? "" : " collapsible-box__content--show") }, h("slot", null))));
   }
   static get watchers() { return {
     "value": ["observeCollapsedValue"]
@@ -560,6 +600,9 @@ let EzComboBox$1 = class extends HTMLElement$1 {
     this.__registerHost();
     this.__attachShadow();
     this.ezChange = createEvent(this, "ezChange", 7);
+    this._limitCharsToSearch = 3;
+    this._deboucingTime = 300;
+    this._startLoading = false;
     /**
      * Deixa o campo disponível ou não para interação com usuário.
      */
@@ -696,19 +739,8 @@ let EzComboBox$1 = class extends HTMLElement$1 {
       this._preSelection = undefined;
     }
   }
-  selectOption(opt) {
-    const currentOpt = this.getSelectedOption();
-    if (currentOpt !== opt) {
-      const adjustedOpt = !(opt === null || opt === void 0 ? void 0 : opt.value) ? undefined : opt;
-      this.value = adjustedOpt;
-      this.errorMessage = "";
-      this.ezChange.emit(adjustedOpt);
-    }
-    else {
-      this.observeValue();
-    }
-  }
   updateSource(source) {
+    this._startLoading = false;
     if (source instanceof Promise) {
       source.then(result => this.updateSource(result));
       this.updateVisibleOptions();
@@ -719,12 +751,26 @@ let EzComboBox$1 = class extends HTMLElement$1 {
         this.updateVisibleOptions();
       }
       else {
-        this.value = source;
+        this.selectOption(source);
       }
     }
   }
+  selectOption(newOption) {
+    var _a, _b;
+    const currentOpt = this.getSelectedOption();
+    if (((_a = currentOpt === null || currentOpt === void 0 ? void 0 : currentOpt.value) === null || _a === void 0 ? void 0 : _a.toString()) !== ((_b = newOption === null || newOption === void 0 ? void 0 : newOption.value) === null || _b === void 0 ? void 0 : _b.toString())) {
+      const adjustedOpt = !(newOption === null || newOption === void 0 ? void 0 : newOption.value) ? undefined : newOption;
+      this.value = adjustedOpt;
+      this.errorMessage = "";
+      this.ezChange.emit(this.value);
+    }
+    else {
+      this.observeValue();
+    }
+  }
   loadOptions(mode, argument = "") {
     this._criteria = argument;
+    this._startLoading = true;
     if (this.optionLoader) {
       this.updateSource(this.optionLoader({ mode, argument }));
     }
@@ -781,25 +827,40 @@ let EzComboBox$1 = class extends HTMLElement$1 {
     this.searchMode ? this.loadOptions("ADVANCED") : this.showOptions();
   }
   onTextInputChangeHandler(event) {
+    var _a;
+    this.clearDeboucingTimeout();
+    if (this._startLoading) {
+      this._changeDeboucingTimeout = window.setTimeout(() => {
+        this.onTextInputChangeHandler(event);
+      }, this._deboucingTime);
+      return;
+    }
     if (!this._criteria) {
       this._inputElement.value = event.data;
     }
-    const argument = event.target.value;
+    const argument = (_a = event.target.value) === null || _a === void 0 ? void 0 : _a.trim();
+    const argumentNumber = Number(argument || undefined);
     this._criteria = argument;
-    if (this._criteria) {
+    if (argument && (!isNaN(argumentNumber) || argument.length >= this._limitCharsToSearch)) {
       if (this.searchMode) {
-        if (this._changeDeboucingTimeout) {
-          window.clearTimeout(this._changeDeboucingTimeout);
-        }
         this._changeDeboucingTimeout = window.setTimeout(() => {
-          this.loadOptions("PREDICTIVE", argument);
-        }, 200);
+          this.loadOptions("PREDICTIVE", isNaN(argumentNumber) ? argument : argumentNumber.toString());
+        }, this._deboucingTime);
       }
       else {
         this.updateVisibleOptions();
       }
       this.showOptions();
     }
+    else {
+      this.hideOptions();
+    }
+  }
+  clearDeboucingTimeout() {
+    if (this._changeDeboucingTimeout) {
+      window.clearTimeout(this._changeDeboucingTimeout);
+      this._changeDeboucingTimeout = undefined;
+    }
   }
   onTextInputClickHandler() {
     if (!this.searchMode) {
@@ -844,6 +905,8 @@ let EzDateInput$1 = class extends HTMLElement$1 {
     this.__registerHost();
     this.__attachShadow();
     this.ezChange = createEvent(this, "ezChange", 7);
+    this.ezStartChange = createEvent(this, "ezStartChange", 7);
+    this.ezCancelWaitingChange = createEvent(this, "ezCancelWaitingChange", 7);
     /**
      * Deixa o campo disponível ou não para uso.
      */
@@ -857,11 +920,16 @@ let EzDateInput$1 = class extends HTMLElement$1 {
     this._textInput.label = this.label;
   }
   observeErrorMessage() {
-    this._textInput.errorMessage = this.errorMessage;
-  }
-  observeValue() {
     if (this._textInput) {
-      this._textInput.value = this.getTextValue(this.value);
+      this._textInput.errorMessage = this.errorMessage;
+    }
+  }
+  observeValue(newValue, oldValue) {
+    if (newValue != oldValue) {
+      if (this._textInput) {
+        this.errorMessage = "";
+        this._textInput.value = this.getTextValue(this.value);
+      }
     }
   }
   /**
@@ -911,12 +979,16 @@ let EzDateInput$1 = class extends HTMLElement$1 {
       }
     }
     else {
+      this.ezCancelWaitingChange.emit();
       this._textInput.errorMessage = "O valor digitado não é uma data válida";
     }
   }
   getTextValue(d) {
     return d ? new Intl.DateTimeFormat("pt-BR").format(d) : undefined;
   }
+  startChange() {
+    this.ezStartChange.emit({ waitmessage: "", blocking: false });
+  }
   componentDidLoad() {
     CSSVarsUtils.applyVarsTextInput(this._elem, this._textInput);
   }
@@ -924,7 +996,7 @@ let EzDateInput$1 = class extends HTMLElement$1 {
     return (h(Host, null, h("ez-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, value: this.getTextValue(this.value), restrict: "0123456789/", enabled: this.enabled, errorMessage: this.errorMessage, mode: this.mode, slaveMode: true }, h("button", { disabled: !this.enabled, tabindex: -1, class: "btn-open-cal", onClick: () => this.showCalendar(), slot: "leftIcon" })), h("ez-calendar", { onEzChange: (event) => { this.hideCalendar(); event.stopPropagation(); }, floating: true, ref: elem => this._calendar = elem })));
+      }, label: this.label, value: this.getTextValue(this.value), onInput: () => this.startChange(), restrict: "0123456789/", enabled: this.enabled, errorMessage: this.errorMessage, mode: this.mode, slaveMode: true }, h("button", { disabled: !this.enabled, tabindex: -1, class: "btn-open-cal", onClick: () => this.showCalendar(), slot: "leftIcon" })), h("ez-calendar", { onEzChange: (event) => { this.hideCalendar(); event.stopPropagation(); }, floating: true, ref: elem => this._calendar = elem })));
   }
   get _elem() { return this; }
   static get watchers() { return {
@@ -943,6 +1015,8 @@ let EzDateTimeInput$1 = class extends HTMLElement$1 {
     this.__registerHost();
     this.__attachShadow();
     this.ezChange = createEvent(this, "ezChange", 7);
+    this.ezStartChange = createEvent(this, "ezStartChange", 7);
+    this.ezCancelWaitingChange = createEvent(this, "ezCancelWaitingChange", 7);
     /**
      * Deixa o campo disponível ou não para uso.
      */
@@ -1048,6 +1122,7 @@ let EzDateTimeInput$1 = class extends HTMLElement$1 {
       }
     }
     else {
+      this.ezCancelWaitingChange.emit();
       this._textInput.errorMessage = "O valor digitado não é uma data válida";
     }
   }
@@ -1062,11 +1137,14 @@ let EzDateTimeInput$1 = class extends HTMLElement$1 {
     };
     return d ? (new Intl.DateTimeFormat('pt-BR', this.showSeconds ? optionsSecond : options).format(d)) : undefined;
   }
+  startChange() {
+    this.ezStartChange.emit({ waitmessage: "", blocking: false });
+  }
   componentDidLoad() {
     CSSVarsUtils.applyVarsTextInput(this._elem, this._textInput);
   }
   render() {
-    return (h(Host, null, h("ez-text-input", { ref: elem => this._textInput = elem, onBlur: () => this.parseDate(), onKeyDown: event => { this.onChangeKeyDown(event); }, label: this.label, value: this.getTextValue(this.value), restrict: "0123456789/: ", enabled: this.enabled, errorMessage: this.errorMessage, mode: this.mode, onFocus: () => this.onFocused(), onClick: () => this.onClicked(), slaveMode: true }, h("button", { disabled: !this.enabled, tabindex: -1, class: "btn-open-cal", onClick: () => this.showCalendar(), slot: "leftIcon" })), h("ez-calendar", { onEzChange: (event) => { this.changeValue(this._calendar.value); event.stopPropagation(); }, floating: true, ref: elem => this._calendar = elem, time: true, showSeconds: this.showSeconds })));
+    return (h(Host, null, h("ez-text-input", { ref: elem => this._textInput = elem, onBlur: () => this.parseDate(), onKeyDown: event => { this.onChangeKeyDown(event); }, label: this.label, value: this.getTextValue(this.value), restrict: "0123456789/: ", enabled: this.enabled, errorMessage: this.errorMessage, mode: this.mode, onInput: () => this.startChange(), onFocus: () => this.onFocused(), onClick: () => this.onClicked(), slaveMode: true }, h("button", { disabled: !this.enabled, tabindex: -1, class: "btn-open-cal", onClick: () => this.showCalendar(), slot: "leftIcon" })), h("ez-calendar", { onEzChange: (event) => { this.changeValue(this._calendar.value); event.stopPropagation(); }, floating: true, ref: elem => this._calendar = elem, time: true, showSeconds: this.showSeconds })));
   }
   get _elem() { return this; }
   static get watchers() { return {
@@ -1407,7 +1485,7 @@ const buildFromDataUnit = (dataUnit) => {
         .filter(descriptor => descriptor.required)
         .map(descriptor => descriptor.name),
       cleanOnCopyFields: visibleFields
-        .filter(descriptor => { var _a; return (_a = descriptor.properties) === null || _a === void 0 ? void 0 : _a.cleanOnCopy; })
+        .filter(descriptor => { var _a, _b; return ((_a = descriptor.properties) === null || _a === void 0 ? void 0 : _a.cleanOnCopy) || ((_b = descriptor.properties) === null || _b === void 0 ? void 0 : _b.autoNum); })
         .map(descriptor => descriptor.name),
       defaultValues
     });
@@ -1419,7 +1497,7 @@ function getTabConfig(tab, sheets) {
   return tabConfig || { label: tab, visible: true };
 }
 function sortTabs(a, b) {
-  return a[0].label == 'Geral' ? -1 : (a[0].order || 10000) - (b[0].order || 10000);
+  return a[0].label == '__main' ? -1 : (a[0].order || 10000) - (b[0].order || 10000);
 }
 const buildFromConfig = (fields, dataUnit) => {
   const sheets = new Map();
@@ -1427,9 +1505,9 @@ const buildFromConfig = (fields, dataUnit) => {
   const cleanOnCopyFields = [];
   const defaultValues = {};
   fields.forEach(config => {
-    var _a, _b;
+    var _a, _b, _c;
     if (config.visible !== false) {
-      const tabConfig = getTabConfig(config.tab || "Geral", sheets);
+      const tabConfig = getTabConfig(config.tab || "__main", sheets);
       const descriptor = dataUnit.getField(config.name);
       if (descriptor && tabConfig.visible) {
         if (!sheets.has(tabConfig)) {
@@ -1440,11 +1518,11 @@ const buildFromConfig = (fields, dataUnit) => {
         if (isRequired) {
           requiredFields.push(config.name);
         }
-        const clearOnCopy = config.cleanOnCopy === undefined ? (_a = descriptor.properties) === null || _a === void 0 ? void 0 : _a.cleanOnCopy : config.cleanOnCopy;
+        const clearOnCopy = config.cleanOnCopy === undefined ? (((_a = descriptor.properties) === null || _a === void 0 ? void 0 : _a.cleanOnCopy) || ((_b = descriptor.properties) === null || _b === void 0 ? void 0 : _b.autoNum)) : config.cleanOnCopy;
         if (clearOnCopy) {
           cleanOnCopyFields.push(config.name);
         }
-        const defaultValue = config.defaultValue === undefined ? (_b = descriptor.properties) === null || _b === void 0 ? void 0 : _b.defaultValue : config.defaultValue;
+        const defaultValue = config.defaultValue === undefined ? (_c = descriptor.properties) === null || _c === void 0 ? void 0 : _c.defaultValue : config.defaultValue;
         if (defaultValue) {
           defaultValues[config.name] = config.defaultValue;
         }
@@ -1470,7 +1548,7 @@ const buildFromConfig = (fields, dataUnit) => {
     .sort(sortTabs)
     .forEach(([key, value]) => {
     metadata.addSheet({
-      label: key.label,
+      label: (key.label === "__main") ? "Principal" : key.label,
       name: key.label,
       items: Array.from(value.values()),
       requiredFields,
@@ -1880,11 +1958,7 @@ class DataBinder {
     this._dataUnit.unsubscribe(this.onDataUnitEvent);
   }
   updateValue(fieldName, field) {
-    const oldValue = field["value"];
-    const newValue = this._dataUnit.getFieldValue(fieldName);
-    if (oldValue != newValue) {
-      field["value"] = newValue;
-    }
+    field["value"] = this._dataUnit.getFieldValue(fieldName);
   }
   updateBind(fieldName, field) {
     const oldBind = this._fields.get(fieldName);
@@ -1892,21 +1966,53 @@ class DataBinder {
       oldBind.destroy();
     }
     field["value"] = this._dataUnit.getFieldValue(fieldName);
-    this._fields.set(fieldName, Bind.create(fieldName, field, (fieldName, waitingChange) => this.changeStarted(fieldName, waitingChange), (fieldName, newValue) => this.setFieldValue(fieldName, newValue)));
+    this._fields.set(fieldName, Bind.create(fieldName, field, (fieldName, waitingChange) => this.changeStarted(fieldName, waitingChange), (fieldName) => this.cancelWaitingChange(fieldName), (fieldName, newValue) => this.setFieldValue(fieldName, newValue)));
     this.bindSearchOptionsLoader(fieldName, field);
     this.applyEzUploadContext(fieldName, field);
   }
   changeStarted(fieldName, waitingChange) {
+    /**
+     * se o waitingChange não é blocante, add um event listener pra
+     * fazer o accept da promise
+     *
+     * se não tiver promise no waitingChange, eu crio uma e resolvo no bind
+     *
+     *
+     */
     if (this._dataUnit.records.length === 0) {
       this._dataUnit.addRecord();
     }
+    if (!waitingChange.blocking && waitingChange.promise == undefined) {
+      const bind = this._fields.get(fieldName);
+      if (bind) {
+        waitingChange.promise = new Promise((resolve, reject) => {
+          bind.waitingChangePromiseResolve = resolve;
+          bind.waitingChangePromiseReject = reject;
+        });
+      }
+    }
     this._dataUnit.startChange(fieldName, waitingChange);
   }
+  cancelWaitingChange(fieldName) {
+    if (this._dataUnit.waitingForChange(fieldName)) {
+      this._dataUnit.cancelWaitingChange(fieldName);
+      const bind = this._fields.get(fieldName);
+      if (bind) {
+        bind.rejectWaitingChange(new WaitingChangeException("Change canceled", fieldName));
+      }
+    }
+  }
   setFieldValue(fieldName, newValue) {
     if (this._dataUnit.records.length === 0) {
       this._dataUnit.addRecord();
     }
     this._dataUnit.setFieldValue(fieldName, newValue);
+    if (this._dataUnit.waitingForChange(fieldName)) {
+      const bind = this._fields.get(fieldName);
+      if (bind) {
+        bind.acceptWaitingChange();
+      }
+    }
   }
   bindSearchOptionsLoader(fieldName, field) {
     if (field.nodeName === "EZ-SEARCH" && field["optionLoader"] == undefined) {
@@ -1935,18 +2041,36 @@ class DataBinder {
 class Bind {
   constructor() {
     this.startChangeEventName = "ezStartChange";
+    this.cancelWaitingChangeEventName = "ezCancelWaitingChange";
     this.changeEventName = "ezChange";
   }
   destroy() {
     this.field.removeEventListener(this.startChangeEventName, this.startChangeListener);
+    this.field.removeEventListener(this.cancelWaitingChangeEventName, this.cancelWaitingChangeListener);
     this.field.removeEventListener(this.changeEventName, this.changeListener);
   }
-  static create(fieldName, field, startChangeCallback, changeCallback) {
+  acceptWaitingChange() {
+    if (this.waitingChangePromiseResolve) {
+      this.waitingChangePromiseResolve();
+      this.waitingChangePromiseReject = undefined;
+      this.waitingChangePromiseResolve = undefined;
+    }
+  }
+  rejectWaitingChange(reason) {
+    if (this.waitingChangePromiseReject) {
+      this.waitingChangePromiseReject(reason);
+      this.waitingChangePromiseReject = undefined;
+      this.waitingChangePromiseResolve = undefined;
+    }
+  }
+  static create(fieldName, field, startChangeCallback, cancelWaitingChangeCallback, changeCallback) {
     const b = new Bind();
     b.field = field;
     b.fieldName = fieldName;
     b.startChangeListener = (evt) => { startChangeCallback(fieldName, evt.detail); };
     b.field.addEventListener(b.startChangeEventName, b.startChangeListener);
+    b.cancelWaitingChangeListener = () => { cancelWaitingChangeCallback(fieldName); };
+    b.field.addEventListener(b.cancelWaitingChangeEventName, b.cancelWaitingChangeListener);
     b.changeListener = (evt) => { changeCallback(fieldName, evt.detail); };
     b.field.addEventListener(b.changeEventName, b.changeListener);
     return b;
@@ -2036,12 +2160,20 @@ let EzForm$1 = class extends HTMLElement$1 {
     requiredFields.forEach(field => {
       const value = record[field];
       const fieldElem = this._element.querySelector(`[data-field-name=${field}]`);
-      if (value === null || value === undefined || value === "") {
-        invalidFields.push(field);
-        fieldElem["errorMessage"] = "Essa informação é obrigatória";
-      }
-      else {
-        fieldElem["errorMessage"] = "";
+      /**
+       * TODO: fieldElem vai ser vazio quando o campo está em uma aba que
+       * está escondida.
+       * Temos que tratar esse caso para apresentar a mensagem de erro
+       * na aba, isso será tratado no card: https://sankhya.atlassian.net/browse/SKA-44182
+       */
+      if (fieldElem) {
+        if (value === null || value === undefined || value === "") {
+          invalidFields.push(field);
+          fieldElem["errorMessage"] = "Essa informação é obrigatória";
+        }
+        else {
+          fieldElem["errorMessage"] = "";
+        }
       }
     });
     const isValid = invalidFields.length === 0;
@@ -2091,7 +2223,6 @@ let EzForm$1 = class extends HTMLElement$1 {
       }
     }
     if (action.type === Action.RECORDS_ADDED) {
-      debugger;
       const metadata = selectFormMetadata(this._store.getState());
       const defaultValues = metadata.getDefaultValues();
       if (defaultValues) {
@@ -112198,6 +112329,7 @@ class AgGridController {
     this.DEFAULT_ROW_HEIGHT = 25;
     this.CHECK_BOX_COL_ID = "checkBoxColumn";
     this.RECORD_ARCHIVE_COL_ID = "__RECORD_ARCHIVE__";
+    this.BLOCK_LOAD_DEBOUNCE = 400;
     this._menuItems = [];
     this._idAttribName = "__record__id__";
     this._isFirstRecordOfPage = true;
@@ -112241,6 +112373,7 @@ class AgGridController {
         rowSelection: this._multipleSelection ? "multiple" : "single",
         serverSideDatasource: this._dataSource,
         sortingOrder: ['desc', 'asc', null],
+        blockLoadDebounceMillis: this.BLOCK_LOAD_DEBOUNCE,
         getRowNodeId: this._dataUnit ? (params) => typeof params === "string" ? params : params[this._idAttribName] : undefined,
         getMainMenuItems: (params) => {
           const column = params.column;
@@ -113638,6 +113771,8 @@ let EzNumberInput$1 = class extends HTMLElement$1 {
     this.__registerHost();
     this.__attachShadow();
     this.ezChange = createEvent(this, "ezChange", 7);
+    this.ezStartChange = createEvent(this, "ezStartChange", 7);
+    this.ezCancelWaitingChange = createEvent(this, "ezCancelWaitingChange", 7);
     /**
      * Deixa o campo disponível ou não para uso.
      */
@@ -113687,6 +113822,7 @@ let EzNumberInput$1 = class extends HTMLElement$1 {
   parseNumber() {
     const parsedNumber = this._textInput.value ? NumberUtils.stringToNumber(this._textInput.value) : undefined;
     if (parsedNumber !== undefined && isNaN(parsedNumber)) {
+      this.ezCancelWaitingChange.emit();
       this.errorMessage = "O valor digitado não é um número válido";
     }
     else {
@@ -113694,6 +113830,7 @@ let EzNumberInput$1 = class extends HTMLElement$1 {
         this.changeValue(parsedNumber);
       }
       catch (e) {
+        this.ezCancelWaitingChange.emit();
         this.errorMessage = e.message;
         return;
       }
@@ -113705,11 +113842,14 @@ let EzNumberInput$1 = class extends HTMLElement$1 {
     }
     return undefined;
   }
+  startChange() {
+    this.ezStartChange.emit({ waitmessage: "", blocking: false });
+  }
   componentDidLoad() {
     CSSVarsUtils.applyVarsTextInput(this._elem, this._textInput);
   }
   render() {
-    return (h("ez-text-input", { ref: elem => this._textInput = elem, onBlur: () => this.parseNumber(), label: this.label, value: this.getTextValue(this.value), restrict: this.precision > 0 ? "0123456789-,." : "0123456789-", enabled: this.enabled, errorMessage: this.errorMessage, mode: this.mode, slaveMode: true }));
+    return (h("ez-text-input", { ref: elem => this._textInput = elem, onBlur: () => this.parseNumber(), label: this.label, onInput: () => this.startChange(), value: this.getTextValue(this.value), restrict: this.precision > 0 ? "0123456789-,." : "0123456789-", enabled: this.enabled, errorMessage: this.errorMessage, mode: this.mode, slaveMode: true }));
   }
   get _elem() { return this; }
   static get watchers() { return {
@@ -114192,11 +114332,17 @@ let EzTextArea$1 = class extends HTMLElement$1 {
       (_b = this._messageBoxElem) === null || _b === void 0 ? void 0 : _b.classList.remove('hasError');
     }
   }
-  observeValue() {
-    this._inputElem.value = this.value == undefined ? "" : this.value;
-    this.handleChange();
-    this.adjustFloatingLabel();
-    this.ezChange.emit(this.value);
+  observeValue(newValue, oldValue) {
+    if (this._inputElem) {
+      if (newValue != oldValue) {
+        if (this.canChangeValue()) {
+          this._inputElem.value = this.value || "";
+        }
+        this.adjustFloatingLabel();
+        this.errorMessage = "";
+        this.ezChange.emit(this.value);
+      }
+    }
   }
   observeMode() {
     if (this._initialRows == undefined) {
@@ -114214,6 +114360,27 @@ let EzTextArea$1 = class extends HTMLElement$1 {
       this._initialRows = rows;
     }
   }
+  //---------------------------------------------
+  // 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();
+  }
+  //---------------------------------------------
+  // Private methods
+  //---------------------------------------------
+  canChangeValue() {
+    return this._inputElem && (this.value || "") !== this._inputElem.value;
+  }
   adjustFloatingLabel() {
     if (this.label && this._labelElem) {
       const hasValue = this.value && this.value.toString().length > 0;
@@ -114234,21 +114401,6 @@ let EzTextArea$1 = class extends HTMLElement$1 {
     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() {
@@ -114258,8 +114410,9 @@ let EzTextArea$1 = class extends HTMLElement$1 {
     }
   }
   handleChange() {
-    this.errorMessage = "";
-    this.value = this._inputElem.value;
+    if (this.canChangeValue()) {
+      this.value = this._inputElem.value;
+    }
   }
   handleFocus() {
     if (this.label && this._labelElem && !this._labelElem.classList.contains("textarea__label--floated")) {
@@ -114342,17 +114495,19 @@ let EzTextInput$1 = class extends HTMLElement$1 {
       }
     }
   }
-  observeValue() {
+  observeValue(newValue, oldValue) {
     if (this._inputElem) {
-      this._inputElem.value = this.value || "";
-    }
-    this.handleChange();
-    this.adjustFloatingLabel();
-    if (this.slaveMode) {
-      return;
+      if (newValue != oldValue) {
+        this._inputElem.value = this.value || "";
+        this.handleChange();
+        this.adjustFloatingLabel();
+        if (this.slaveMode) {
+          return;
+        }
+        this.errorMessage = "";
+        this.ezChange.emit(this.value);
+      }
     }
-    this.errorMessage = "";
-    this.ezChange.emit(this.value);
   }
   adjustFloatingLabel() {
     if (this.label && this._labelElem) {
@@ -114515,6 +114670,8 @@ let EzTimeInput$1 = class extends HTMLElement$1 {
     this.__registerHost();
     this.__attachShadow();
     this.ezChange = createEvent(this, "ezChange", 7);
+    this.ezStartChange = createEvent(this, "ezStartChange", 7);
+    this.ezCancelWaitingChange = createEvent(this, "ezCancelWaitingChange", 7);
     /**
      * Deixa o campo disponível ou não para digitação.
      */
@@ -114575,10 +114732,12 @@ let EzTimeInput$1 = class extends HTMLElement$1 {
     this.prepareValue(this.viewValue);
     if (this.viewValue && !TimeFormatter.validateTime(this.viewValue, this.showSeconds)) {
       this._oldViewValue = this.viewValue;
+      this.ezCancelWaitingChange.emit();
       this.errorMessage = "Favor inserir um horário válido.";
     }
     else {
       if (this.viewValue === this._oldViewValue) {
+        this.ezCancelWaitingChange.emit();
         return;
       }
       this._oldViewValue = this.viewValue;
@@ -114597,6 +114756,7 @@ let EzTimeInput$1 = class extends HTMLElement$1 {
     }
   }
   handleChange() {
+    this.ezStartChange.emit({ waitmessage: "", blocking: false });
     this.viewValue = this._inputElem.value;
     this.value = NumberUtils.stringToNumber(this.viewValue.replace(/\D/g, ""));
   }
@@ -114756,7 +114916,12 @@ class RemoteFile {
           }
           const response = xhr.response;
           if (response) {
-            resolve(JSON.parse(response));
+            try {
+              resolve(JSON.parse(response));
+            }
+            catch (error) {
+              reject(`Servidor não retornou um objeto válido: ${response}.\n${error}`);
+            }
           }
         }
       };
@@ -114810,6 +114975,7 @@ let EzUpload$1 = class extends HTMLElement$1 {
     this.__attachShadow();
     this.ezChange = createEvent(this, "ezChange", 7);
     this.ezStartChange = createEvent(this, "ezStartChange", 7);
+    this.ezCancelWaitingChange = createEvent(this, "ezCancelWaitingChange", 7);
     this._filePointers = new Map();
     /**
     * Deixa o campo disponível ou não para digitação.
@@ -114898,14 +115064,27 @@ let EzUpload$1 = class extends HTMLElement$1 {
     }
   }
   async doAddFile(file) {
-    if (this.validateFile(file)) {
-      this.ezStartChange.emit({ waitmessage: "Há arquivos sendo enviados. Por favor aguarde a conclusão ou cancele o envio." });
-      const uploadingFile = new RemoteFile(file);
-      this._filePointers.set(file.name, uploadingFile);
-      uploadingFile.upload(this.urlUpload, this._requestHeaders, (file) => this.updateFeedback(file))
-        .then((files) => files.forEach(ezFile => this.finishUpload(ezFile)))
-        .catch(msg => this.showError(msg));
-      forceUpdate(this);
+    try {
+      if (this.validateFile(file)) {
+        this.ezStartChange.emit({ waitmessage: "Há arquivos sendo enviados. Por favor aguarde a conclusão ou cancele o envio.", blocking: true });
+        const uploadingFile = new RemoteFile(file);
+        const oldPointer = this._filePointers.get(file.name);
+        if (oldPointer && this.isRemoteFile(oldPointer)) {
+          oldPointer.abortUpload();
+        }
+        this._filePointers.set(file.name, uploadingFile);
+        uploadingFile.upload(this.urlUpload, this._requestHeaders, (file) => this.updateFeedback(file))
+          .then((files) => files.forEach(ezFile => this.finishUpload(ezFile)))
+          .catch(msg => {
+          this.ezCancelWaitingChange.emit();
+          this.showError(msg);
+        });
+        forceUpdate(this);
+      }
+    }
+    catch (error) {
+      this.ezCancelWaitingChange.emit();
+      throw error;
     }
   }
   finishUpload(ezFile) {
@@ -115674,10 +115853,11 @@ let TestDu$1 = class extends HTMLElement$1 {
 const EzApplication = /*@__PURE__*/proxyCustomElement(EzApplication$1, [0,"ez-application"]);
 const EzButton = /*@__PURE__*/proxyCustomElement(EzButton$1, [1,"ez-button",{"label":[513],"enabled":[516],"mode":[513],"image":[513],"iconName":[513,"icon-name"],"size":[513]}]);
 const EzCalendar = /*@__PURE__*/proxyCustomElement(EzCalendar$1, [1,"ez-calendar",{"value":[1040],"floating":[516],"time":[516],"showSeconds":[516,"show-seconds"]}]);
+const EzCardItem = /*@__PURE__*/proxyCustomElement(EzCardItem$1, [1,"ez-card-item",{"item":[16]}]);
 const EzCheck = /*@__PURE__*/proxyCustomElement(EzCheck$1, [1,"ez-check",{"label":[513],"value":[1540],"enabled":[1540],"mode":[513]}]);
 const EzChip = /*@__PURE__*/proxyCustomElement(EzChip$1, [1,"ez-chip",{"label":[513],"enabled":[516],"removePosition":[513,"remove-position"],"mode":[513],"value":[1540]}]);
 const EzCollapsibleBox = /*@__PURE__*/proxyCustomElement(EzCollapsibleBox$1, [1,"ez-collapsible-box",{"value":[1540],"label":[513],"headerSize":[513,"header-size"],"iconPlacement":[513,"icon-placement"],"stretchTitle":[516,"stretch-title"]}]);
-const EzComboBox = /*@__PURE__*/proxyCustomElement(EzComboBox$1, [1,"ez-combo-box",{"value":[1537],"label":[513],"enabled":[516],"options":[1040],"errorMessage":[1537,"error-message"],"searchMode":[4,"search-mode"],"showSelectedValue":[4,"show-selected-value"],"showOptionValue":[4,"show-option-value"],"suppressSearch":[4,"suppress-search"],"optionLoader":[16],"suppressEmptyOption":[4,"suppress-empty-option"],"canShowError":[516,"can-show-error"],"mode":[513],"_preSelection":[32],"_visibleOptions":[32]}]);
+const EzComboBox = /*@__PURE__*/proxyCustomElement(EzComboBox$1, [1,"ez-combo-box",{"value":[1537],"label":[513],"enabled":[516],"options":[1040],"errorMessage":[1537,"error-message"],"searchMode":[4,"search-mode"],"showSelectedValue":[4,"show-selected-value"],"showOptionValue":[4,"show-option-value"],"suppressSearch":[4,"suppress-search"],"optionLoader":[16],"suppressEmptyOption":[4,"suppress-empty-option"],"canShowError":[516,"can-show-error"],"mode":[513],"_preSelection":[32],"_visibleOptions":[32],"_startLoading":[32]}]);
 const EzDateInput = /*@__PURE__*/proxyCustomElement(EzDateInput$1, [1,"ez-date-input",{"label":[513],"value":[1040],"enabled":[516],"errorMessage":[1537,"error-message"],"mode":[513]}]);
 const EzDateTimeInput = /*@__PURE__*/proxyCustomElement(EzDateTimeInput$1, [1,"ez-date-time-input",{"label":[513],"value":[1040],"enabled":[516],"errorMessage":[1537,"error-message"],"showSeconds":[516,"show-seconds"],"mode":[513]}]);
 const EzDialog = /*@__PURE__*/proxyCustomElement(EzDialog$1, [1,"ez-dialog",{"confirm":[1028],"critical":[1028],"message":[1025],"opened":[1540],"personalizedIconPath":[1025,"personalized-icon-path"],"ezTitle":[1025,"ez-title"]}]);
@@ -115708,6 +115888,7 @@ const defineCustomElements = (opts) => {
       EzApplication,
   EzButton,
   EzCalendar,
+  EzCardItem,
   EzCheck,
   EzChip,
   EzCollapsibleBox,
@@ -115744,4 +115925,4 @@ const defineCustomElements = (opts) => {
   }
 };
 
-export { EzApplication, EzButton, EzCalendar, EzCheck, EzChip, EzCollapsibleBox, EzComboBox, EzDateInput, EzDateTimeInput, EzDialog, EzFilterInput, EzForm, EzGrid, EzIcon, EzList, EzLoadingBar, EzModal, EzNumberInput, EzPopover, EzPopup, EzSearch, EzTabselector, EzTextArea, EzTextInput, EzTimeInput, EzToast, EzUpload, EzViewStack, GridConfig, SelectBox, TestDu, defineCustomElements };
+export { EzApplication, EzButton, EzCalendar, EzCardItem, EzCheck, EzChip, EzCollapsibleBox, EzComboBox, EzDateInput, EzDateTimeInput, EzDialog, EzFilterInput, EzForm, EzGrid, EzIcon, EzList, EzLoadingBar, EzModal, EzNumberInput, EzPopover, EzPopup, EzSearch, EzTabselector, EzTextArea, EzTextInput, EzTimeInput, EzToast, EzUpload, EzViewStack, GridConfig, SelectBox, TestDu, defineCustomElements };