@sankhyalabs/ezui 1.1.38 → 1.1.42

package/dist/custom-elements/index.js

@@ -1020,12 +1020,18 @@ let EzComboBox$1 = class extends HTMLElement {
   }
   getText() {
     let text = '';
-    const selected = this.value;
+    const selected = this.getSelectedOption();
     if (selected) {
       text = this.showselectedvalue ? `${selected.value} - ${selected.label}` : selected.label;
     }
     return text;
   }
+  getSelectedOption() {
+    if (typeof this.value === 'string' || this.value instanceof String) {
+      return this._visibleOptions.find(o => o.value === this.value);
+    }
+    return this.value;
+  }
   updateVisibleOptions() {
     let opts = this._source || [];
     if (!this.searchmode && this._criteria) {
@@ -1094,9 +1100,11 @@ let EzComboBox$1 = class extends HTMLElement {
     }
   }
   selectOption(opt) {
-    if (this.value !== opt) {
-      this.value = !(opt === null || opt === void 0 ? void 0 : opt.value) ? null : opt;
-      this.ezChange.emit(this.value);
+    const currentOpt = this.getSelectedOption();
+    if (currentOpt !== opt) {
+      const adjustedOpt = !(opt === null || opt === void 0 ? void 0 : opt.value) ? null : opt;
+      this.value = adjustedOpt;
+      this.ezChange.emit(adjustedOpt);
     }
     else {
       this.internalUpdate();
@@ -1319,7 +1327,7 @@ let EzDialog$1 = class extends HTMLElement {
      */
     this.oppened = false;
   }
-  handleButtonClick(selectedOption) {
+  async handleButtonClick(selectedOption) {
     this.oppened = false;
     this.ezChange.emit(selectedOption);
   }
@@ -1328,10 +1336,10 @@ let EzDialog$1 = class extends HTMLElement {
       return (h("div", { class: "overlay" }, h("div", { class: "dialog" }, h("div", { class: this.critical === true ? "dialog__critical--indicator" : "dialog__warning--indicator" }), h("div", { class: "dialog__container" }, h("div", { class: "title__container" }, h("div", { class: "title__box" }, this.personalizedIconPath ?
         h("svg", { class: "iconePersonalizado", role: "img" }, h("use", { xlinkHref: this.personalizedIconPath }))
         :
-          h("div", { class: this.critical ? "title-icon title-icon--critical" : "title-icon" }), h("div", { class: "title title--label" }, h("h2", null, this.title))), h("button", { class: "btn-close", onClick: () => { this.oppened = false; this.ezChange.emit("CANCEL"); } })), h("div", { class: "text text--primary text--medium message" }, this.message), this.confirm ?
-        h("div", { class: "button-yes-no__container" }, h("ez-button", { class: "button__no", mode: "link", label: "N\u00E3o", onClick: () => this.handleButtonClick("N") }), h("ez-button", { label: "Ok", onClick: () => this.handleButtonClick("S") }))
+          h("div", { class: this.critical ? "title-icon title-icon--critical" : "title-icon" }), h("div", { class: "title title--label" }, h("h2", null, this.ezTitle))), h("button", { class: "btn-close", onClick: () => { this.oppened = false; this.ezChange.emit(false); } })), h("div", { class: "text text--primary text--medium message" }, this.message), this.confirm ?
+        h("div", { class: "button-yes-no__container" }, h("ez-button", { class: "button__no", mode: "link", label: "N\u00E3o", onClick: () => this.handleButtonClick(false) }), h("ez-button", { label: "Ok", onClick: () => this.handleButtonClick(true) }))
         : undefined, !this.confirm ?
-        h("div", { class: "button__ok--container" }, h("ez-button", { label: "Ok", onClick: () => this.handleButtonClick("S") }))
+        h("div", { class: "button__ok--container" }, h("ez-button", { label: "Ok", onClick: () => this.handleButtonClick(true) }))
         : undefined))));
     }
     return null;
@@ -2874,11 +2882,48 @@ function showHideNavBtn(state, { buttonName, status }) {
   return Object.assign(Object.assign({}, state), { visibleButtons });
 }
 
-function removeHandler(dataUnit) {
-  if (confirm("Tem certeza que deseja Remover?")) {
-    dataUnit.remove();
+class Application {
+  static async showDialog(title, message, icon = null, confirm, critical = false) {
+    return new Promise(resolve => {
+      let dialog = document.querySelector("ez-dialog");
+      if (!dialog) {
+        dialog = document.createElement("ez-dialog");
+        window.document.body.appendChild(dialog);
+      }
+      dialog.ezTitle = title;
+      dialog.message = message;
+      dialog.critical = critical;
+      dialog.confirm = confirm;
+      dialog.personalizedIconPath = icon;
+      dialog.oppened = true;
+      dialog.addEventListener("ezChange", (evt) => resolve(evt.detail));
+    });
+  }
+  static async alert(title, message, icon = null) {
+    return Application.showDialog(title, message, icon, false, false);
+  }
+  static async confirm(title, message, icon = null, critical = false) {
+    return Application.showDialog(title, message, icon, true, critical);
+  }
+  static async info(message) {
+    let toast = document.querySelector("ez-toast");
+    if (!toast) {
+      toast = document.createElement("ez-toast");
+      window.document.body.appendChild(toast);
+    }
+    toast.message = message;
+    toast.fadeTime = 4000;
+    toast.show();
   }
 }
+
+function removeHandler(dataUnit) {
+  Application.confirm("Exclusão de registro", "Tem certeza que deseja Remover?", null, true).then(ok => {
+    if (ok) {
+      dataUnit.remove();
+    }
+  });
+}
 const NavigationBar = ({ dataUnit: du, buttonProps, enabled }) => {
   if (buttonProps.previousVisible
     || buttonProps.nextVisible
@@ -3212,7 +3257,7 @@ class DataUnit {
     });
     const result = this.recordsValidator.validateRecords(this, recordsToValidate, triggedBy);
     if (result.message) {
-      alert(result.message);
+      Application.info(result.message);
     }
     return result.isValid;
   }
@@ -3290,10 +3335,9 @@ const Field = ({ dataUnit, field, forceScroll, enabled }) => {
       const target = getProp(properties, 'URL');
       const strHeaders = getProp(properties, 'HEADERS');
       const headers = strHeaders ? JSON.parse(strHeaders) : {};
+      const maxfiles = Number(getProp(properties, "maxfiles") || 0);
       return (h("div", { class: "col col--sd-12 padding--small" },
-        h("ez-upload", { onEzChange: (event) => {
-            changeFieldHandler(event.target['value']);
-          }, target: target, headers: headers, value: value })));
+        h("ez-upload", { value: value, label: formattedLabel, enabled: isEnabled, onEzChange: (event) => changeFieldHandler(event.detail), urlupload: target, requestheaders: headers, maxfiles: maxfiles })));
     case 'DATE':
       return h("div", { class: "col col--sd-12 col--tb-3 padding--small" }, loadingData ? h("place-holder", null) :
         h("ez-date-input", { value: !value ? null : DateUtils.clearTime(value), label: formattedLabel, enabled: isEnabled, onEzChange: (event) => changeFieldHandler(event.target['value']), errormessage: errorMessage, ref: elem => scrollToView(forceScroll, elem), key: key }));
@@ -3388,6 +3432,7 @@ let EzForm$1 = class extends HTMLElement {
     this._dataUnits = new Map();
     this._duSources = new Map();
     this._tabPositionByField = new Map();
+    this._duToLoad = [];
   }
   cleanPreparedMetadata() {
     this._preparedMetadata = undefined;
@@ -3527,6 +3572,9 @@ let EzForm$1 = class extends HTMLElement {
       };
       this._preparedMetadata = metadata.map((form, index) => {
         const du = form.dataUnit;
+        if (form.autoLoad) {
+          this._duToLoad.push(du);
+        }
         this.decorateDU(du);
         const duName = du.name;
         this._duSources.set(duName, du);
@@ -3568,6 +3616,10 @@ let EzForm$1 = class extends HTMLElement {
       }
     }
   }
+  componentDidRender() {
+    this._duToLoad.forEach(du => du.load());
+    this._duToLoad = [];
+  }
   loadSearch(argument, context) {
     const fieldSearchExecutor = this.parseExecutor(this.fieldsearchexecutor);
     if (fieldSearchExecutor) {
@@ -3609,6 +3661,7 @@ let EzForm$1 = class extends HTMLElement {
   render() {
     return this._preparedMetadata ? h(FormSheet, { enabled: this.enabled, store: this._store, source: this._preparedMetadata, parentName: "__MAIN__FORM__", dataUnitBuilder: (du, parentDataUnit) => this.buildDataUnit(du, parentDataUnit) }) : null;
   }
+  static get assetsDirs() { return ["assets"]; }
   get _host() { return this; }
   static get watchers() { return {
     "metadata": ["cleanPreparedMetadata"]
@@ -4304,9 +4357,9 @@ let EzPopup$1 = class extends HTMLElement {
   }
   render() {
     if (this.opened) {
-      return (h(Host, null, h("div", { class: "overlay" }, h("div", { class: "popup col " + this.size }, h("div", { class: "popup__container" }, h("div", { class: "popup__content" }, h("div", { class: "popup__header" }, this.title ?
-        h("div", { class: "title popup__title" }, this.title)
-        : undefined, h("button", { class: this.title ? "btn-close" : "btn-close btn-close--solo", onClick: () => { this.opened = false; this.ezChange.emit("CANCEL"); } })), h("div", { class: "popup__expandable-content" }, h("slot", null))))))));
+      return (h(Host, null, h("div", { class: "overlay" }, h("div", { class: "popup col " + this.size }, h("div", { class: "popup__container" }, h("div", { class: "popup__content" }, h("div", { class: "popup__header" }, this.ezTitle ?
+        h("div", { class: "title popup__title" }, this.ezTitle)
+        : undefined, h("button", { class: this.ezTitle ? "btn-close" : "btn-close btn-close--solo", onClick: () => { this.opened = false; this.ezChange.emit("CANCEL"); } })), h("div", { class: "popup__expandable-content" }, h("slot", null))))))));
     }
     return null;
   }
@@ -4341,8 +4394,9 @@ let EzSearch$1 = class extends HTMLElement {
     }
   }
   onComboChange(evt) {
-    this.value = this._comboElement.value;
-    this.ezChange.emit(this.value);
+    evt.stopPropagation();
+    this.value = evt.detail;
+    this.ezChange.emit(evt.detail);
   }
   render() {
     return (h("ez-combo-box", { ref: elem => this._comboElement = elem, value: this.value, label: this.label, enabled: this.enabled, errormessage: this.errormessage, optionloader: this.optionloader, searchmode: true, onEzChange: evt => this.onComboChange(evt), showselectedvalue: this.showselectedvalue, showoptionvalue: this.showoptionvalue }));
@@ -5038,144 +5092,252 @@ let EzTimeInput$1 = class extends HTMLElement {
   static get style() { return ezTimeInputCss; }
 };
 
-const ezUploadCss = ":host{--iu--height:42px;--iu--width:100%;--iu__icon--width:48px;--iu__container--background-color:var(--background--medium, #d2dce9);--iu__color--primary:var(--color--primary, #008561);--iu--padding--extra-small:var(--space--extra-small, 3px);--iu--padding--small:var(--space--small, 6px);--iu--padding--medium:var(--space--medium, 12px);--iu--padding--large:var(--space--large, 24px);--iu--border-radius:var(--border--radius-medium, 12px);--iu__border--color:var(--color-strokes, #DCE0E8);--iu__input--border:var(--border--medium, 2px solid);--iu--text-shadow:var(--text-shadow, 0 0 0 #353535, 0 0 1px transparent);--iu--text--primary:var(--text-primary, #626e82);--iu--font-size:var(--text--medium, 14px);--iu--font-family:var(--font-pattern, Arial);--iu--font-weight:var(--text-weight--large, 500);display:flex;flex-wrap:wrap;position:relative;font-family:var(--iu--font-family);font-size:var(--iu--font-size);width:var(--iu--width);font-weight:var(--iu--font-weight)}.iu{display:flex;flex-wrap:wrap;background-color:var(--iu__container--background-color);padding:var(--iu--padding--small);width:100%;border-radius:12px;box-sizing:border-box}.iu__container{width:100%;height:100%;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;border:2px dashed var(--iu__border--color);border-radius:6px;box-sizing:border-box}.iu__footer{display:flex;flex-wrap:wrap;justify-content:flex-start;width:100%;padding:0 var(--iu--padding--medium) var(--iu--padding--medium) var(--iu--padding--medium);box-sizing:border-box}.iu__item{display:flex;width:100%;justify-content:flex-start;align-items:center;align-self:center;padding-bottom:var(--iu--padding--extra-small);box-sizing:border-box;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.iu__item-label{display:flex;max-width:80%;align-self:stretch;align-items:center}.file__name{font-weight:200}.box__content{width:100%;justify-content:center;align-items:center;height:100%;border:1px dashed var(--iu__border--color);border-radius:6px;box-sizing:border-box}.box__container{display:flex;flex-wrap:wrap;background-color:var(--iu__container--background-color);padding:6px;width:100%;border-radius:12px}a:-webkit-any-link{color:#008561;fill:#008561;cursor:pointer;text-decoration:none}progress[value]{display:flex;width:100%;appearance:none;border:1px solid var(--iu__border--color);height:12px;justify-content:flex-start;align-items:center;border-radius:3px;position:relative}progress[value]::-webkit-progress-bar{display:flex;-webkit-appearance:none;width:100%;background-color:rgb(255, 255, 255);border-radius:2px;padding:2px}progress[value]::-webkit-progress-value{display:flex;width:100%;background-color:var(--iu__color--primary)}.text--center{text-align:center}.align--middle{align-self:center;align-items:center}.text{font-family:\"Sora\", \"Algerian\";text-shadow:0 0 0 #353535, 0 0 1px transparent}.text--primary{color:var(--iu--text--primary);text-shadow:var(--iu--text-shadow)}.text--ellipsis{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.text--medium{font-size:14px}.text--small{font-size:12px}.btn-cancel{outline:none;border:none;background-color:unset;cursor:pointer}.btn-cancel::after{content:'';display:flex;background-color:var(--text--primary, #008561);width:8px;height:8px;clip-path:path(\"M 8,0.8 7.2,0 4,3.2 0.8,0 0,0.8 3.2,4 0,7.2 0.8,8 4,4.8 7.2,8 8,7.2 4.8,4 Z\")}.iu__file-icon{outline:none;border:none;background-color:unset;cursor:pointer}.iu__file-icon::after{content:'';display:flex;background-color:var(--text--primary, #626e82);width:9px;height:11px;clip-path:path(\"M 1.2272719,8.4999999 V 2.75 c 0,-1.1045695 1.4652499,-2 3.2727273,-2 1.8074777,0 3.2727281,0.8954305 3.2727281,2 V 8.9999999 C 7.7727273,9.690356 6.8569456,10.25 5.7272719,10.25 4.5975985,10.25 3.6818174,9.690356 3.6818174,8.9999999 V 3.75 c 0,-0.2761425 0.3663125,-0.5 0.8181818,-0.5 0.4518694,0 0.8181818,0.2238575 0.8181818,0.5 V 8.4999999 H 6.5454537 V 3.75 C 6.5454537,3.059644 5.6296725,2.5 4.4999992,2.5 3.3703258,2.5 2.4545446,3.059644 2.4545446,3.75 V 8.9999999 C 2.4545446,10.10457 3.9197945,11 5.7272719,11 7.5347496,11 9,10.10457 9,8.9999999 V 2.75 C 9,1.231217 6.9852809,0 4.4999992,0 2.0147181,5e-7 0,1.231217 0,2.75 v 5.7499999 z\")}.iu__icon-label{justify-content:center;display:flex;cursor:pointer;padding:var(--iu--padding--large) 0px;box-sizing:border-box}.row{width:100%;display:flex;flex-wrap:wrap}.col{display:flex;flex-wrap:wrap;align-self:flex-start;box-sizing:border-box}.col--stretch{align-self:stretch}.col--undefined{width:unset}.col--nowrap{flex-wrap:nowrap}@media screen and (min-width: 320px){.col--sd-1{width:8.33333%}.col--sd-2{width:16.66667%}.col--sd-3{width:25%}.col--sd-4{width:33.33333%}.col--sd-5{width:41.66667%}.col--sd-6{width:50%}.col--sd-7{width:58.33333%}.col--sd-8{width:66.66667%}.col--sd-9{width:75%}.col--sd-10{width:83.33333%}.col--sd-11{width:91.66667%}.col--sd-12{width:100%}}@media screen and (min-width: 480px){.col--pn-1{width:8.33333%}.col--pn-2{width:16.66667%}.col--pn-3{width:25%}.col--pn-4{width:33.33333%}.col--pn-5{width:41.66667%}.col--pn-6{width:50%}.col--pn-7{width:58.33333%}.col--pn-8{width:66.66667%}.col--pn-9{width:75%}.col--pn-10{width:83.33333%}.col--pn-11{width:91.66667%}.col--pn-12{width:100%}}@media screen and (min-width: 768px){.col--tb-1{width:8.33333%}.col--tb-2{width:16.66667%}.col--tb-3{width:25%}.col--tb-4{width:33.33333%}.col--tb-5{width:41.66667%}.col--tb-6{width:50%}.col--tb-7{width:58.33333%}.col--tb-8{width:66.66667%}.col--tb-9{width:75%}.col--tb-10{width:83.33333%}.col--tb-11{width:91.66667%}.col--tb-12{width:100%}}@media screen and (min-width: 992px){.col--md-1{width:8.33333%}.col--md-2{width:16.66667%}.col--md-3{width:25%}.col--md-4{width:33.33333%}.col--md-5{width:41.66667%}.col--md-6{width:50%}.col--md-7{width:58.33333%}.col--md-8{width:66.66667%}.col--md-9{width:75%}.col--md-10{width:83.33333%}.col--md-11{width:91.66667%}.col--md-12{width:100%}}@media screen and (min-width: 1200px){.col--ld-1{width:8.33333%}.col--ld-2{width:16.66667%}.col--ld-3{width:25%}.col--ld-4{width:33.33333%}.col--ld-5{width:41.66667%}.col--ld-6{width:50%}.col--ld-7{width:58.33333%}.col--ld-8{width:66.66667%}.col--ld-9{width:75%}.col--ld-10{width:83.33333%}.col--ld-11{width:91.66667%}.col--ld-12{width:100%}}";
+const ezToastCss = ":host{--toast-z-index:var(--more-visible, 2);--toast-color--secondary:var(--color--secondary, #383c45);--toast-title--primary:var(--title--primary, #2b3a54);--toast-space--small:var(--space--small, 6px);--toast--close__image:url('data:image/svg+xml;utf8,<svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" xmlns=\"http://www.w3.org/2000/svg%22%3E<path d=\"M 7.0060773,5.995511 11.461972,1.5397722 c 0.132856,-0.1328413 0.207547,-0.3130253 0.207547,-0.5009046 0,-0.18786999 -0.07469,-0.3680541 -0.207547,-0.5009048 -0.132857,-0.13284126 -0.31302,-0.20748126 -0.500927,-0.20748126 -0.187812,0 -0.36807,0.07464 -0.500926,0.20748126 L 6.0042244,4.9937015 1.5482921,0.5379628 C 1.4154357,0.40512154 1.2352533,0.33048154 1.0473657,0.33048154 c -0.18787813,0 -0.36807,0.07464 -0.50092647,0.20748126 -0.13285646,0.1328507 -0.20749026,0.31303481 -0.20749026,0.5009048 0,0.1878793 0.0746338,0.3680633 0.20749026,0.5009046 L 5.0023715,5.995511 0.54643923,10.452213 c -0.0676086,0.06534 -0.12151598,0.14352 -0.15859681,0.229916 -0.0370714,0.08639 -0.0565645,0.1794 -0.0573369,0.27335 -7.724e-4,0.09404 0.0171873,0.187331 0.0528423,0.274293 0.0356455,0.08705 0.0882688,0.166087 0.15479148,0.23256 0.0665321,0.06648 0.14562277,0.11897 0.2326735,0.154567 0.0870507,0.0356 0.18031463,0.05344 0.2743433,0.05259 0.094029,-8.5e-4 0.1869528,-0.02049 0.2733331,-0.0576 0.08639,-0.0372 0.1645078,-0.09121 0.2298029,-0.158817 L 6.0042244,6.9973204 10.460119,11.453078 c 0.132856,0.132851 0.313114,0.207444 0.500926,0.207444 0.187907,0 0.36807,-0.07459 0.500927,-0.207444 0.132856,-0.13285 0.207547,-0.313006 0.207547,-0.500904 0,-0.187898 -0.07469,-0.368054 -0.207547,-0.500905 z\"/></svg>')}.toast__container{position:fixed;display:flex;bottom:100px;z-index:var(--toast-z-index);left:100px;width:30%;box-sizing:border-box;background-color:var(--toast-color--secondary);border-radius:6px;align-items:center;padding:12px;visibility:hidden}.message__container{font-family:\"Sora\", \"Algerian\";text-shadow:0 0 0 #353535, 0 0 1px transparent;color:#FFFFFF;font-size:14px;width:90%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.message__conteiner--icon{padding-left:var(--toast-space--small);width:80%}.btn-close{display:flex;justify-content:flex-end;padding:0;outline:none;width:10%;border:none;background-color:unset;cursor:pointer}.btn-close::after{content:'';display:flex;background-color:#FFFFFF;width:12px;height:12px;-webkit-mask-image:var(--toast--close__image);mask-image:var(--toast--close__image)}.toast__container--oppened{animation:fadein 0.5s, fadeout 0.5s 3s;visibility:visible}@-webkit-keyframes fadein{from{left:-100px;opacity:0}to{left:100px;opacity:1}}@keyframes fadein{from{left:-100px;opacity:0}to{left:100px;opacity:1}}@-webkit-keyframes fadeout{from{left:100px;opacity:1}to{bottom:0;opacity:0}}@keyframes fadeout{from{left:100px;opacity:1}to{bottom:0;opacity:0}}";
+
+let EzToast$1 = class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    /**
+    * Controla o tempo de exibição do componente em milissegundos.
+    */
+    this.fadeTime = 5000;
+    /**
+    * Adiciona ícone de check no componente.
+    */
+    this.useIcon = false;
+  }
+  async show() {
+    this.container.classList.add("toast__container--oppened");
+    this.container.style.animation = `fadein 0.5s, fadeout 0.5s ${this.fadeTime / 1000}s`;
+    setTimeout(() => {
+      this.container.classList.remove("toast__container--oppened");
+      this.container.style.animation = `none`;
+    }, this.fadeTime + 400);
+  }
+  render() {
+    return (h("div", { ref: (el) => this.container = el, class: "toast__container" }, this.useIcon ?
+      h("slot", { name: "icon" })
+      : undefined, h("div", { class: this.useIcon ? "message__container message__conteiner--icon" : "message__container", title: this.message }, " ", this.message, " "), h("button", { class: "btn-close", onClick: () => { this.container.classList.remove("toast__container--oppened"); this.container.style.animation = `none`; } })));
+  }
+  static get style() { return ezToastCss; }
+};
+
+class RemoteFile {
+  constructor(file) {
+    this.file = file;
+    this.size = file.size;
+    this.name = file.name;
+  }
+  abortUpload() {
+    if (this._uploadingXhr) {
+      this._aborted = true;
+      this._uploadingXhr.abort();
+      this._uploadingXhr = undefined;
+    }
+  }
+  isUploading() {
+    return this._uploadingXhr !== undefined;
+  }
+  async upload(server, headers, updateCallBack) {
+    return new Promise((resolve, reject) => {
+      const xhr = new XMLHttpRequest();
+      this._uploadingXhr = xhr;
+      this._aborted = false;
+      this.progress = 0;
+      xhr.upload.onprogress = (e) => {
+        const loaded = e.loaded;
+        const total = e.total;
+        this.progress = ~~((loaded / total) * 100);
+        updateCallBack(this, loaded, total);
+      };
+      xhr.onreadystatechange = () => {
+        if (xhr.readyState == 4) {
+          this._uploadingXhr = undefined;
+          const status = xhr.status;
+          if (!this._aborted) {
+            if (status === 0) {
+              reject("Servidor indisponível");
+            }
+            else if (status >= 500) {
+              reject("Erro inesperado no servidor");
+            }
+            else if (status >= 400) {
+              reject("Operação não permitida");
+            }
+          }
+          const response = xhr.response;
+          if (response) {
+            resolve(JSON.parse(response));
+          }
+        }
+      };
+      xhr.ontimeout = () => {
+        reject("Tempo limite de transferência atingido.");
+      };
+      const formData = new FormData();
+      formData.append("ARQUIVO", this.file, this.file.name);
+      xhr.open("POST", server, true);
+      if (headers) {
+        headers.forEach((value, key) => xhr.setRequestHeader(key, value));
+      }
+      xhr.send(formData);
+    });
+  }
+  async delete(item, server, headers) {
+    return new Promise((resolve, reject) => {
+      const xhr = new XMLHttpRequest();
+      xhr.onreadystatechange = () => {
+        if (xhr.readyState == 4) {
+          if (xhr.status === 0) {
+            reject("Servidor indisponível");
+          }
+          else if (xhr.status >= 500) {
+            reject("Erro inesperado no servidor");
+          }
+          else if (xhr.status >= 400) {
+            reject("Operação não permitida");
+          }
+          resolve(true);
+        }
+      };
+      xhr.ontimeout = () => {
+        reject("Tempo limite de remoção atingido.");
+      };
+      xhr.open("DELETE", server, true);
+      if (headers) {
+        headers.forEach((value, key) => xhr.setRequestHeader(key, value));
+      }
+      xhr.send(JSON.stringify(item));
+    });
+  }
+}
+
+const ezUploadCss = ":host{--iu--height:42px;--iu--width:100%;--iu__icon--width:48px;--iu__container--background-color:var(--background--medium, #d2dce9);--iu__color--primary:var(--color--primary, #008561);--iu--padding--extra-small:var(--space--extra-small, 3px);--iu--padding--small:var(--space--small, 6px);--iu--padding--medium:var(--space--medium, 12px);--iu--padding--large:var(--space--large, 24px);--iu--border-radius:var(--border--radius-medium, 12px);--iu__border--color:var(--color-strokes, #DCE0E8);--iu__input--border:var(--border--medium, 2px solid);--iu--text-shadow:var(--text-shadow, 0 0 0 #353535, 0 0 1px transparent);--iu--text--primary:var(--text-primary, #626e82);--iu--font-size:var(--text--medium, 14px);--iu--font-family:var(--font-pattern, Arial);--iu--font-weight:var(--text-weight--large, 500);display:flex;flex-wrap:wrap;position:relative;font-family:var(--iu--font-family);font-size:var(--iu--font-size);width:var(--iu--width);font-weight:var(--iu--font-weight)}.iu{display:flex;flex-wrap:wrap;background-color:var(--iu__container--background-color);padding:var(--iu--padding--small);width:100%;border-radius:12px;box-sizing:border-box}.iu__container{width:100%;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;border:2px dashed var(--iu__border--color);border-radius:6px;box-sizing:border-box}.iu__footer{display:flex;flex-wrap:wrap;justify-content:flex-start;width:100%;padding:0 var(--iu--padding--medium) var(--iu--padding--medium) var(--iu--padding--medium);box-sizing:border-box}.iu__item{display:flex;width:100%;justify-content:flex-start;align-items:center;align-self:center;padding-bottom:var(--iu--padding--extra-small);box-sizing:border-box;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.iu__item-label{display:flex;max-width:80%;align-self:stretch;align-items:center}.file__name{font-weight:200}.box__content{width:100%;justify-content:center;align-items:center;height:100%;border:1px dashed var(--iu__border--color);border-radius:6px;box-sizing:border-box}.box__container{display:flex;flex-wrap:wrap;background-color:var(--iu__container--background-color);padding:6px;width:100%;border-radius:12px}a:-webkit-any-link{color:#008561;fill:#008561;cursor:pointer;text-decoration:none}progress[value]{display:flex;width:100%;appearance:none;border:1px solid var(--iu__border--color);height:12px;justify-content:flex-start;align-items:center;border-radius:3px;position:relative}progress[value]::-webkit-progress-bar{display:flex;-webkit-appearance:none;width:100%;background-color:rgb(255, 255, 255);border-radius:2px;padding:2px}progress[value]::-webkit-progress-value{display:flex;width:100%;background-color:var(--iu__color--primary)}.text--center{text-align:center}.align--middle{align-self:center;align-items:center}.text{font-family:\"Sora\", \"Algerian\";text-shadow:0 0 0 #353535, 0 0 1px transparent}.text--primary{color:var(--iu--text--primary);text-shadow:var(--iu--text-shadow)}.text--ellipsis{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.text--medium{font-size:14px}.text--small{font-size:12px}.btn-cancel{outline:none;border:none;background-color:unset;cursor:pointer}.btn-cancel::after{content:'';display:flex;background-color:var(--text--primary, #008561);width:8px;height:8px;clip-path:path(\"M 8,0.8 7.2,0 4,3.2 0.8,0 0,0.8 3.2,4 0,7.2 0.8,8 4,4.8 7.2,8 8,7.2 4.8,4 Z\")}.iu__label{padding:var(--space--small);padding-top:0;box-sizing:border-box;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:var(--iu--font-family);font-size:var(--text--extra-small);font-weight:var( --iu--font-weight);color:var(--iu--text--primary);text-shadow:var(--iu--text-shadow)}.iu__file-icon{outline:none;border:none;background-color:unset;cursor:pointer}.iu__file-icon::after{content:'';display:flex;background-color:var(--text--primary, #626e82);width:9px;height:11px;clip-path:path(\"M 1.2272719,8.4999999 V 2.75 c 0,-1.1045695 1.4652499,-2 3.2727273,-2 1.8074777,0 3.2727281,0.8954305 3.2727281,2 V 8.9999999 C 7.7727273,9.690356 6.8569456,10.25 5.7272719,10.25 4.5975985,10.25 3.6818174,9.690356 3.6818174,8.9999999 V 3.75 c 0,-0.2761425 0.3663125,-0.5 0.8181818,-0.5 0.4518694,0 0.8181818,0.2238575 0.8181818,0.5 V 8.4999999 H 6.5454537 V 3.75 C 6.5454537,3.059644 5.6296725,2.5 4.4999992,2.5 3.3703258,2.5 2.4545446,3.059644 2.4545446,3.75 V 8.9999999 C 2.4545446,10.10457 3.9197945,11 5.7272719,11 7.5347496,11 9,10.10457 9,8.9999999 V 2.75 C 9,1.231217 6.9852809,0 4.4999992,0 2.0147181,5e-7 0,1.231217 0,2.75 v 5.7499999 z\")}.iu__icon-label{justify-content:center;display:flex;cursor:pointer;padding:var(--iu--padding--large) 0px;box-sizing:border-box}.row{width:100%;display:flex;flex-wrap:wrap}.col{display:flex;flex-wrap:wrap;align-self:flex-start;box-sizing:border-box}.col--stretch{align-self:stretch}.col--undefined{width:unset}.col--nowrap{flex-wrap:nowrap}@media screen and (min-width: 320px){.col--sd-1{width:8.33333%}.col--sd-2{width:16.66667%}.col--sd-3{width:25%}.col--sd-4{width:33.33333%}.col--sd-5{width:41.66667%}.col--sd-6{width:50%}.col--sd-7{width:58.33333%}.col--sd-8{width:66.66667%}.col--sd-9{width:75%}.col--sd-10{width:83.33333%}.col--sd-11{width:91.66667%}.col--sd-12{width:100%}}@media screen and (min-width: 480px){.col--pn-1{width:8.33333%}.col--pn-2{width:16.66667%}.col--pn-3{width:25%}.col--pn-4{width:33.33333%}.col--pn-5{width:41.66667%}.col--pn-6{width:50%}.col--pn-7{width:58.33333%}.col--pn-8{width:66.66667%}.col--pn-9{width:75%}.col--pn-10{width:83.33333%}.col--pn-11{width:91.66667%}.col--pn-12{width:100%}}@media screen and (min-width: 768px){.col--tb-1{width:8.33333%}.col--tb-2{width:16.66667%}.col--tb-3{width:25%}.col--tb-4{width:33.33333%}.col--tb-5{width:41.66667%}.col--tb-6{width:50%}.col--tb-7{width:58.33333%}.col--tb-8{width:66.66667%}.col--tb-9{width:75%}.col--tb-10{width:83.33333%}.col--tb-11{width:91.66667%}.col--tb-12{width:100%}}@media screen and (min-width: 992px){.col--md-1{width:8.33333%}.col--md-2{width:16.66667%}.col--md-3{width:25%}.col--md-4{width:33.33333%}.col--md-5{width:41.66667%}.col--md-6{width:50%}.col--md-7{width:58.33333%}.col--md-8{width:66.66667%}.col--md-9{width:75%}.col--md-10{width:83.33333%}.col--md-11{width:91.66667%}.col--md-12{width:100%}}@media screen and (min-width: 1200px){.col--ld-1{width:8.33333%}.col--ld-2{width:16.66667%}.col--ld-3{width:25%}.col--ld-4{width:33.33333%}.col--ld-5{width:41.66667%}.col--ld-6{width:50%}.col--ld-7{width:58.33333%}.col--ld-8{width:66.66667%}.col--ld-9{width:75%}.col--ld-10{width:83.33333%}.col--ld-11{width:91.66667%}.col--ld-12{width:100%}}";
 
 let EzUpload$1 = class extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
     this.__attachShadow();
-    this.validatedEvent = createEvent(this, "validatedEvent", 7);
-    this.initUploadEvent = createEvent(this, "initUploadEvent", 7);
-    this.finishedUploadEvent = createEvent(this, "finishedUploadEvent", 7);
     this.ezChange = createEvent(this, "ezChange", 7);
+    this._filePointers = new Map();
+    /**
+    * Deixa o campo disponível ou não para digitação.
+    */
+    this.enabled = true;
   }
-  fileListChange() {
-    this.ezChange.emit({ value: this.value });
+  changeValue(newValue) {
+    if (newValue !== this._updatingValue) {
+      this._filePointers.forEach(f => {
+        if (this.isRemoteFile(f)) {
+          f.abortUpload();
+        }
+      });
+      this._filePointers = new Map();
+      this.updateFilePointers();
+    }
+    this._updatingValue = undefined;
   }
-  addFiles(files) {
-    Array.prototype.forEach.call(files, this.addFile.bind(this));
+  updateFilePointers() {
+    if (this.value) {
+      this.value.forEach(ezFile => this._filePointers.set(ezFile.name, ezFile));
+    }
   }
-  addFile(file) {
-    this.errorMessage = undefined;
-    if (this.validateFile(file)) {
-      if (this.target) {
-        this._uploadFile(file);
+  normalizeRequestHeaders() {
+    this._requestHeaders = new Map();
+    if (typeof this.requestheaders == 'string') {
+      try {
+        this.requestheaders = JSON.parse(this.requestheaders);
       }
-      else {
-        this.errorMessage = "Endereço de upload não informado";
-        alert(this.errorMessage);
+      catch (e) {
+        this.requestheaders = undefined;
       }
     }
-    else {
-      if (this.errorMessage && this.errorMessage.length > 0) {
-        alert(this.errorMessage);
-      }
+    for (var key in this.requestheaders) {
+      this._requestHeaders.set(key, this.requestheaders[key]);
     }
   }
-  validateFile(file) {
-    this.errorMessage = '';
-    let isValid = true;
-    if (this.maxFileSize >= 0 && file.size > this.maxFileSize) {
-      this.errorMessage = 'O tamanho máximo dos arquivos é de ' + this.formatBytes(this.maxFileSize);
-      isValid = false;
-    }
-    this.validatedEvent.emit({ isValid: isValid, fileName: file.name });
-    return isValid;
-  }
-  _uploadFile(file) {
-    const xhr = (file.xhr = this._createXhr());
-    const newValue = this.value ? [...this.value] : [];
-    newValue.push({ name: file.name, size: file.size, xhr: file.xhr });
-    let stalledId;
-    xhr.upload.onprogress = (e) => {
-      clearTimeout(stalledId);
-      const loaded = e.loaded, total = e.total, progress = ~~((loaded / total) * 100);
-      let viewFile = newValue.find(f => f.name === file.name);
-      if (viewFile) {
-        viewFile.progress = progress;
-      }
-    };
-    xhr.onreadystatechange = () => {
-      this.errorMessage = '';
-      if (xhr.readyState == 4) {
-        clearTimeout(stalledId);
-        file.indeterminate = file.uploading = false;
-        if (xhr.status === 0) ;
-        else if (xhr.status >= 500) {
-          this.errorMessage = "Erro inesperado no servidor";
-        }
-        else if (xhr.status >= 400) {
-          this.errorMessage = "Operação não permitida";
-        }
-        if (this.errorMessage && this.errorMessage.length > 0) {
-          //TODO
-          // Conferir com o time de UX um estado de erro ou remoção da lista
-          // this.removeFile(file.name);
-          alert(this.errorMessage);
-        }
-        else {
-          if (xhr.response) {
-            let response = JSON.parse(xhr.response);
-            response.forEach(element => {
-              let viewFile = newValue.find(f => f.name === this.decode_utf8(element.name));
-              if (viewFile) {
-                viewFile.progress = undefined;
-                //Validar estado de erro com UX
-                viewFile.error = false;
-                delete viewFile.xhr;
-                viewFile.downloadURL = element.downloadURL;
-                viewFile.lastModifiedDate = element.lastModifiedDate;
-                viewFile.properties = element.properties;
-              }
-            });
-            this.value = newValue;
-            this.fileListChange();
-          }
-          else {
-            let viewFile = newValue.find(f => f.name === file.name);
-            viewFile.progress = undefined;
-            //Validar estado de erro com UX
-            viewFile.error = true;
+  async addFiles(files) {
+    Array.prototype.forEach.call(files, this.addFile.bind(this));
+  }
+  async addFile(file) {
+    const oldFile = this._filePointers.get(file.name);
+    if (oldFile) {
+      Application.confirm("Substituir arquivo", `Já existe um arquivo chamado "${file.name}". Deseja substituí-lo?`)
+        .then(ok => {
+        if (ok) {
+          if (this.isRemoteFile(oldFile)) {
+            oldFile.abortUpload();
           }
+          this.doAddFile(file);
         }
+      });
+    }
+    else {
+      this.doAddFile(file);
+    }
+  }
+  async doAddFile(file) {
+    if (this.validateFile(file)) {
+      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);
+    }
+  }
+  finishUpload(ezFile) {
+    this._filePointers.set(ezFile.name, ezFile);
+    this.updateValue();
+  }
+  updateValue() {
+    this._updatingValue = [];
+    this._filePointers.forEach(f => {
+      if (!this.isRemoteFile(f)) {
+        this._updatingValue.push(f);
       }
-    };
-    xhr.ontimeout = () => {
-      if (this.errorMessage && this.errorMessage.length > 0) {
-        this.errorMessage.concat(" / Tempo expirado");
-        this.removeFile(file.name);
-        alert(this.errorMessage);
-      }
-    };
-    const formData = new FormData();
-    formData.append(this.formDataName, file, file.name);
-    xhr.open("POST", this.target, true);
-    this._configureXhr(xhr);
-    file.status = "conectando";
-    file.uploading = file.indeterminate = true;
-    file.complete = file.abort = file.error = file.held = false;
-    xhr.send(formData);
-  }
-  _createXhr() {
-    return new XMLHttpRequest();
-  }
-  _configureXhr(xhr) {
-    if (typeof this.headers == 'string') {
-      try {
-        this.headers = JSON.parse(this.headers);
-      }
-      catch (e) {
-        this.headers = undefined;
+    });
+    this.value = this._updatingValue;
+    this.ezChange.emit(this.value);
+  }
+  buildProgressId(uploading) {
+    let sanitizedName = uploading.name.replace(/[^a-z0-9_]/gi, '_');
+    return `PROGRESS_${sanitizedName}_${uploading.file.lastModified}`;
+  }
+  updateFeedback(uf) {
+    window.requestAnimationFrame(() => {
+      if (this._host) {
+        const progress = this._host.shadowRoot.querySelector('#' + this.buildProgressId(uf));
+        if (progress) {
+          progress.value = uf.progress;
+        }
       }
+    });
+  }
+  validateFile(file) {
+    if (this.maxfiles > 0 && this._filePointers.size >= this.maxfiles) {
+      this.showError(`A quantidade máxima de arquivos é ${this.maxfiles}.`);
+      return false;
     }
-    for (var key in this.headers) {
-      xhr.setRequestHeader(key, this.headers[key]);
+    if (file.size === 0) {
+      this.showError(`Erro de permissão: O arquivo "${file.name}" não pode ser enviado.`);
+      return false;
     }
-    if (this.timeout) {
-      xhr.timeout = this.timeout;
+    if (!this.urlupload) {
+      this.showError("Endereço de upload não informado");
+      return false;
     }
-    xhr.withCredentials = this.withCredentials;
+    if (this.maxfilesize >= 0 && file.size > this.maxfilesize) {
+      this.showError("O tamanho máximo dos arquivos é de " + this.formatBytes(this.maxfilesize));
+      return false;
+    }
+    return true;
+  }
+  showError(message) {
+    Application.alert("Enviando arquivo", message);
   }
   formatBytes(bytes, decimals = 1) {
     if (bytes === 0)
@@ -5187,96 +5349,92 @@ let EzUpload$1 = class extends HTMLElement {
     return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + ' ' + sizes[i];
   }
   onFileInputChange(event) {
-    this.addFiles(event.target.files);
+    const input = event.target;
+    this.addFiles(Array.from(input.files));
     this._fileInput.value = '';
   }
-  /*componentWillLoad() {
-    if (this.fileList?.length > 0) {
-      this.fileList.forEach(item => {
-        if (item.size) {
-          item.strSize = this.formatBytes(item.size);
-        }
-      })
-      this.fileList = [...this.fileList];
+  isRemoteFile(item) {
+    return "file" in item;
+  }
+  removeFromList(name) {
+    this._filePointers.delete(name);
+    this.updateValue();
+  }
+  removeFile(name) {
+    const item = this._filePointers.get(name);
+    if (this.isRemoteFile(item)) {
+      item.abortUpload();
+      this.removeFromList(name);
+    }
+    else {
+      if (this.urldelete) {
+        const uploadingFile = new RemoteFile(null);
+        this._filePointers.set(item.name, uploadingFile);
+        uploadingFile.delete(item, this.urldelete, null)
+          .then(_ok => this.removeFromList(name))
+          .catch(msg => this.showError(msg));
+      }
+      else {
+        this.removeFromList(name);
+      }
+    }
+  }
+  openFilesDialog() {
+    if (this.maxfiles > 0 && this._filePointers.size >= this.maxfiles) {
+      this.showError(`A quantidade máxima de arquivos é ${this.maxfiles}.`);
+    }
+    else {
+      this._fileInput.click();
     }
-  }*/
-  decode_utf8(s) {
-    return decodeURIComponent(escape(s));
   }
   componentDidLoad() {
-    if (this.dropZone && window.FileList && window.File) {
-      this.dropZone.addEventListener('dragover', event => {
+    if (this._dropZone && window.FileList && window.File) {
+      this._dropZone.addEventListener('dragover', event => {
         event.stopPropagation();
         event.preventDefault();
         event.dataTransfer.dropEffect = 'copy';
       });
-      this.dropZone.addEventListener('drop', event => {
+      this._dropZone.addEventListener('drop', event => {
         event.stopPropagation();
         event.preventDefault();
-        this.addFiles(event.dataTransfer.files);
+        this.addFiles(Array.from(event.dataTransfer.files));
       });
     }
   }
-  removeFile(name, xhr, downloadURL) {
-    if (xhr) {
-      xhr.abort();
-    }
-    if (downloadURL) {
-      this.removeFileFromServer(name, downloadURL);
-    }
-    this.value = [...this.value.filter(function (value) { return value.name !== name; })];
-  }
-  removeFileFromServer(name, donwloadURL) {
-    const xhr = this._createXhr();
-    this.errorMessage = '';
-    let stalledId;
-    xhr.onreadystatechange = () => {
-      if (xhr.readyState == 4) {
-        clearTimeout(stalledId);
-        if (xhr.status === 0) {
-          this.errorMessage = "Servidor indisponível";
-        }
-        else if (xhr.status >= 500) {
-          this.errorMessage = "Erro inesperado no servidor";
-        }
-        else if (xhr.status >= 400) {
-          this.errorMessage = "Operação não permitida";
-        }
-        if (this.errorMessage && this.errorMessage.length > 0) {
-          //TODO
-          // Conferir com o time de UX um estado de erro ou remoção da lista
-          // this.removeFile(file.name);
-          alert(this.errorMessage);
-        }
-      }
-    };
-    xhr.ontimeout = () => {
-      if (this.errorMessage && this.errorMessage.length > 0) {
-        alert(this.errorMessage);
+  componentWillRender() {
+    if (this.value) {
+      if (this._filePointers.size < this.value.length) {
+        this.updateFilePointers();
       }
-    };
-    const body = JSON.stringify({
-      name: name,
-      donwloadURL: donwloadURL,
-    });
-    xhr.open("DELETE", this.target, true);
-    xhr.setRequestHeader('Content-Type', 'application/json');
-    this._configureXhr(xhr);
-    xhr.send(body);
+    }
   }
   render() {
-    var _a;
-    return (h(Host, null, h("slot", null, h("div", { ref: (el) => this.dropZone = el, class: "iu" }, h("div", { class: "iu__container" }, h("div", { onClick: () => this._fileInput.click(), class: "iu__icon-label" }, h("button", { class: "iu__file-icon" }), h("div", { class: "text text--center text--medium text--primary" }, "Arraste e solte ou clique para anexar arquivo")), ((_a = this.value) === null || _a === void 0 ? void 0 : _a.length) > 0 ?
-      h("div", { class: "iu__footer" }, this.value.map(file => {
-        return (h("div", { class: "iu__item" }, h("div", { class: "iu__item-label" + (file.progress ? " modificador " : " modificador ") }, file.downloadURL ?
-          h("div", { title: file.name + "(" + this.formatBytes(file.size) + ")", class: "file__name text text--primary text--small text--ellipsis align--middle" }, h("a", { href: file.downloadURL, download: true }, file.name, " (", this.formatBytes(file.size), ")"))
-          :
-            h("div", { title: file.name + "(" + this.formatBytes(file.size) + ")", class: "col--stretch align--middle file__name text text--primary text--small text--ellipsis align--middle " }, file.name, " (", this.formatBytes(file.size), ")")), file.progress ?
-          h("div", { class: "col col--sd-4 col--stretch align--middle" }, h("progress", { value: file.progress, max: "100" }))
-          : undefined, h("div", { class: "col col--stretch align--middle" }, h("button", { class: "btn-cancel ", onClick: () => this.removeFile(file.name, file.xhr) }))));
-      }))
-      : undefined))), h("input", { ref: (el) => this._fileInput = el, type: "file", id: "fileInput", hidden: true, onChange: (ev) => this.onFileInputChange(ev), multiple: true })));
+    return (h("div", { ref: (el) => this._dropZone = el, class: "iu" }, this.label ? h("label", { class: "iu__label", title: this.label }, this.label) : null, h("div", { class: "iu__container", onClick: () => this.openFilesDialog() }, h("div", { class: "iu__icon-label" }, h("button", { class: "iu__file-icon" }), h("div", { class: "text text--center text--medium text--primary" }, "Arraste e solte ou clique para adicionar arquivos")), this.buildFooter()), h("input", { ref: (el) => this._fileInput = el, onChange: (ev) => this.onFileInputChange(ev), type: "file", multiple: true, hidden: true })));
   }
+  buildFooter() {
+    if (this._filePointers.size === 0) {
+      return null;
+    }
+    const items = [];
+    this._filePointers.forEach(item => items.push(this.buildFileItem(item)));
+    return (h("div", { class: "iu__footer" }, items));
+  }
+  buildFileItem(item) {
+    const fileName = item.name;
+    const progress = Number(item['progress']);
+    const downloadURL = item['downloadURL'];
+    const label = `${fileName} (${this.formatBytes(item.size)})`;
+    return (h("div", { class: "iu__item", key: fileName, onClick: evt => evt.stopPropagation() }, h("div", { class: "iu__item-label modificador" }, h("div", { title: label, class: "col--stretch align--middle file__name text text--primary text--small text--ellipsis align--middle" }, downloadURL ? h("a", { href: downloadURL, download: true }, label) : label)), isNaN(progress)
+      ?
+        null
+      :
+        h("div", { class: "col col--sd-4 col--stretch align--middle" }, h("progress", { id: this.buildProgressId(item), value: progress, max: "100" })), h("div", { class: "col col--stretch align--middle" }, h("button", { class: "btn-cancel ", onClick: () => this.removeFile(fileName) }))));
+  }
+  get _host() { return this; }
+  static get watchers() { return {
+    "value": ["changeValue"],
+    "requestheaders": ["normalizeRequestHeaders"]
+  }; }
   static get style() { return ezUploadCss; }
 };
 
@@ -5304,11 +5462,6 @@ let FormMetadata$1 = class extends HTMLElement {
       properties.push({ name: "options", value: JSON.stringify(objOpts) });
     }
     else if (userInterface === "FILE") {
-      /*<URL>http://localhost:8080/2a3skw-graphql/uploadFiles</URL>
-              <HEADERS>
-                <HEADER NAME="Authorization">dsfs</HEADER>
-              </HEADER>
-            </field> */
       const urlElement = element.querySelector('URL');
       const headersElement = element.querySelectorAll('HEADERS>HEADER');
       if (urlElement) {
@@ -5321,6 +5474,7 @@ let FormMetadata$1 = class extends HTMLElement {
         });
         properties.push({ name: "HEADERS", value: JSON.stringify(headers) });
       }
+      this.addPropertyIfExists(properties, element, "maxfiles");
     }
     else {
       if (!label) {
@@ -5425,9 +5579,9 @@ const EzButton = /*@__PURE__*/proxyCustomElement(EzButton$1, [1,"ez-button",{"la
 const EzCalendar = /*@__PURE__*/proxyCustomElement(EzCalendar$1, [1,"ez-calendar",{"value":[1040],"floating":[516]}]);
 const EzCheck = /*@__PURE__*/proxyCustomElement(EzCheck$1, [1,"ez-check",{"label":[513],"value":[1540],"enabled":[516],"mode":[513]}]);
 const EzCollapsableBox = /*@__PURE__*/proxyCustomElement(EzCollapsableBox$1, [1,"ez-collapsable-box",{"value":[1540],"label":[513]}]);
-const EzComboBox = /*@__PURE__*/proxyCustomElement(EzComboBox$1, [1,"ez-combo-box",{"value":[1040],"label":[513],"enabled":[516],"options":[1040],"errormessage":[1537],"searchmode":[4],"showselectedvalue":[4],"showoptionvalue":[4],"optionloader":[16],"_preSelection":[32],"_visibleOptions":[32]}]);
+const EzComboBox = /*@__PURE__*/proxyCustomElement(EzComboBox$1, [1,"ez-combo-box",{"value":[1537],"label":[513],"enabled":[516],"options":[1040],"errormessage":[1537],"searchmode":[4],"showselectedvalue":[4],"showoptionvalue":[4],"optionloader":[16],"_preSelection":[32],"_visibleOptions":[32]}]);
 const EzDateInput = /*@__PURE__*/proxyCustomElement(EzDateInput$1, [1,"ez-date-input",{"label":[513],"value":[1040],"enabled":[516],"errormessage":[1537]}]);
-const EzDialog = /*@__PURE__*/proxyCustomElement(EzDialog$1, [1,"ez-dialog",{"confirm":[1028],"critical":[1028],"message":[1025],"oppened":[1540],"personalizedIconPath":[1025,"personalized-icon-path"],"title":[1025]}]);
+const EzDialog = /*@__PURE__*/proxyCustomElement(EzDialog$1, [1,"ez-dialog",{"confirm":[1028],"critical":[1028],"message":[1025],"oppened":[1540],"personalizedIconPath":[1025,"personalized-icon-path"],"ezTitle":[1025,"ez-title"]}]);
 const EzForm = /*@__PURE__*/proxyCustomElement(EzForm$1, [0,"ez-form",{"metadataexecutor":[1],"loadexecutor":[1],"saveexecutor":[1],"removeexecutor":[1],"fieldsearchexecutor":[1],"ignoresavevalidation":[4],"metadata":[16],"slavemode":[4],"enabled":[4]}]);
 const EzIcon = /*@__PURE__*/proxyCustomElement(EzIcon$1, [1,"ez-icon",{"size":[513],"href":[513]}]);
 const EzLabelChip = /*@__PURE__*/proxyCustomElement(EzLabelChip$1, [1,"ez-label-chip",{"label":[513],"enabled":[516],"removable":[516],"value":[1540]}]);
@@ -5435,13 +5589,14 @@ const EzModal = /*@__PURE__*/proxyCustomElement(EzModal$1, [1,"ez-modal",{"modal
 const EzNumberInput = /*@__PURE__*/proxyCustomElement(NumberInput, [1,"ez-number-input",{"strvalue":[1025],"value":[1026],"label":[513],"enabled":[516],"errormessage":[1537],"precision":[1538],"prettyprecision":[1538],"textleft":[516],"formatnumber":[513]}]);
 const EzNumericInput = /*@__PURE__*/proxyCustomElement(EzNumericInput$1, [1,"ez-numeric-input",{"label":[513],"value":[1538],"enabled":[516],"errormessage":[1537],"precision":[8],"prettyprecision":[8]}]);
 const EzPopover = /*@__PURE__*/proxyCustomElement(EzPopover$1, [1,"ez-popover",{"autoclose":[516],"top":[1537],"left":[1537],"bottom":[1537],"right":[1537],"boxwidth":[513],"isOpened":[1540,"is-opened"]}]);
-const EzPopup = /*@__PURE__*/proxyCustomElement(EzPopup$1, [1,"ez-popup",{"size":[1],"opened":[1540],"useHeader":[1540,"use-header"],"title":[1]}]);
-const EzSearch = /*@__PURE__*/proxyCustomElement(EzSearch$1, [1,"ez-search",{"value":[1040],"label":[1537],"enabled":[1540],"errormessage":[1537],"optionloader":[16],"showselectedvalue":[4],"showoptionvalue":[4]}]);
+const EzPopup = /*@__PURE__*/proxyCustomElement(EzPopup$1, [1,"ez-popup",{"size":[1],"opened":[1540],"useHeader":[1540,"use-header"],"ezTitle":[1,"ez-title"]}]);
+const EzSearch = /*@__PURE__*/proxyCustomElement(EzSearch$1, [1,"ez-search",{"value":[1537],"label":[1537],"enabled":[1540],"errormessage":[1537],"optionloader":[16],"showselectedvalue":[4],"showoptionvalue":[4]}]);
 const EzTabselector = /*@__PURE__*/proxyCustomElement(EzTabselector$1, [1,"ez-tabselector",{"selectedindex":[1537],"selectedtab":[1537],"tabs":[1]}]);
 const EzTextArea = /*@__PURE__*/proxyCustomElement(EzTextArea$1, [1,"ez-text-area",{"label":[513],"value":[1537],"enabled":[516],"loading":[516],"errormessage":[1537],"rows":[1538]}]);
 const EzTextInput = /*@__PURE__*/proxyCustomElement(EzTextInput$1, [1,"ez-text-input",{"label":[513],"value":[1537],"enabled":[516],"loading":[516],"errormessage":[1537],"onlynumber":[516],"mask":[1],"restrict":[1]}]);
 const EzTimeInput = /*@__PURE__*/proxyCustomElement(EzTimeInput$1, [1,"ez-time-input",{"label":[513],"viewValue":[1537,"view-value"],"value":[1026],"enabled":[516],"errormessage":[1537],"showSeconds":[516,"show-seconds"]}]);
-const EzUpload = /*@__PURE__*/proxyCustomElement(EzUpload$1, [1,"ez-upload",{"maxFileSize":[514,"max-file-size"],"headers":[520],"timeout":[514],"withCredentials":[516,"with-credentials"],"formDataName":[513,"form-data-name"],"target":[513],"value":[16]}]);
+const EzToast = /*@__PURE__*/proxyCustomElement(EzToast$1, [1,"ez-toast",{"message":[1025],"fadeTime":[1026,"fade-time"],"useIcon":[1028,"use-icon"]}]);
+const EzUpload = /*@__PURE__*/proxyCustomElement(EzUpload$1, [1,"ez-upload",{"label":[1],"enabled":[4],"maxfilesize":[2],"maxfiles":[2],"requestheaders":[8],"urlupload":[1],"urldelete":[1],"value":[1040]}]);
 const FormMetadata = /*@__PURE__*/proxyCustomElement(FormMetadata$1, [1,"form-metadata",{"name":[1],"label":[1],"dataunit":[1025],"many":[4],"autoload":[4],"metadata":[1040]}]);
 const PlaceHolder = /*@__PURE__*/proxyCustomElement(PlaceHolder$1, [1,"place-holder"]);
 const defineCustomElements = (opts) => {
@@ -5468,6 +5623,7 @@ const defineCustomElements = (opts) => {
   EzTextArea,
   EzTextInput,
   EzTimeInput,
+  EzToast,
   EzUpload,
   FormMetadata,
   PlaceHolder
@@ -5479,4 +5635,4 @@ const defineCustomElements = (opts) => {
   }
 };
 
-export { EzActionChip, EzButton, EzCalendar, EzCheck, EzCollapsableBox, EzComboBox, EzDateInput, EzDialog, EzForm, EzIcon, EzLabelChip, EzModal, EzNumberInput, EzNumericInput, EzPopover, EzPopup, EzSearch, EzTabselector, EzTextArea, EzTextInput, EzTimeInput, EzUpload, FormMetadata, PlaceHolder, defineCustomElements };
+export { EzActionChip, EzButton, EzCalendar, EzCheck, EzCollapsableBox, EzComboBox, EzDateInput, EzDialog, EzForm, EzIcon, EzLabelChip, EzModal, EzNumberInput, EzNumericInput, EzPopover, EzPopup, EzSearch, EzTabselector, EzTextArea, EzTextInput, EzTimeInput, EzToast, EzUpload, FormMetadata, PlaceHolder, defineCustomElements };