@sankhyalabs/ezui 1.1.39 → 1.1.43

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

@@ -2138,10 +2138,47 @@ 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
@@ -2476,7 +2513,7 @@ class DataUnit {
     });
     const result = this.recordsValidator.validateRecords(this, recordsToValidate, triggedBy);
     if (result.message) {
-      alert(result.message);
+      Application.info(result.message);
     }
     return result.isValid;
   }
@@ -2554,10 +2591,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 (index.h("div", { class: "col col--sd-12 padding--small" },
-        index.h("ez-upload", { onEzChange: (event) => {
-            changeFieldHandler(event.target['value']);
-          }, target: target, headers: headers, value: value })));
+        index.h("ez-upload", { value: value, label: formattedLabel, enabled: isEnabled, onEzChange: (event) => changeFieldHandler(event.detail), urlupload: target, requestheaders: headers, maxfiles: maxfiles })));
     case 'DATE':
       return index.h("div", { class: "col col--sd-12 col--tb-3 padding--small" }, loadingData ? index.h("place-holder", null) :
         index.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 }));
@@ -2880,6 +2916,7 @@ let EzForm = class {
   render() {
     return this._preparedMetadata ? index.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 index.getElement(this); }
   static get watchers() { return {
     "metadata": ["cleanPreparedMetadata"]
@@ -3495,142 +3532,218 @@ let EzTextInput = class {
 };
 EzTextInput.style = ezTextInputCss;
 
-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%}}";
+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);--iu__btn-cancel-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" version=\"1.1\" height=\"8x\" width=\"8px\"><path d=\"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\"/></svg>');--iu__file-icon-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" version=\"1.1\" height=\"11x\" width=\"9px\"><path d=\"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\"/></svg>');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;-webkit-mask-image:var(--iu__btn-cancel-image);mask-image:var(--iu__btn-cancel-image)}.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;-webkit-mask-image:var(--iu__file-icon-image);mask-image:var(--iu__file-icon-image)}.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 = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
-    this.validatedEvent = index.createEvent(this, "validatedEvent", 7);
-    this.initUploadEvent = index.createEvent(this, "initUploadEvent", 7);
-    this.finishedUploadEvent = index.createEvent(this, "finishedUploadEvent", 7);
     this.ezChange = index.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));
+      index.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;
+    }
+    if (file.size === 0) {
+      this.showError(`Erro de permissão: O arquivo "${file.name}" não pode ser enviado.`);
+      return false;
     }
-    for (var key in this.headers) {
-      xhr.setRequestHeader(key, this.headers[key]);
+    if (!this.urlupload) {
+      this.showError("Endereço de upload não informado");
+      return false;
     }
-    if (this.timeout) {
-      xhr.timeout = this.timeout;
+    if (this.maxfilesize >= 0 && file.size > this.maxfilesize) {
+      this.showError("O tamanho máximo dos arquivos é de " + this.formatBytes(this.maxfilesize));
+      return false;
     }
-    xhr.withCredentials = this.withCredentials;
+    return true;
+  }
+  showError(message) {
+    Application.alert("Enviando arquivo", message);
   }
   formatBytes(bytes, decimals = 1) {
     if (bytes === 0)
@@ -3642,97 +3755,92 @@ let EzUpload = class {
     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; })];
-    this.fileListChange();
-  }
-  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 (index.h(index.Host, null, index.h("slot", null, index.h("div", { ref: (el) => this.dropZone = el, class: "iu" }, index.h("div", { class: "iu__container" }, index.h("div", { onClick: () => this._fileInput.click(), class: "iu__icon-label" }, index.h("button", { class: "iu__file-icon" }), index.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 ?
-      index.h("div", { class: "iu__footer" }, this.value.map(file => {
-        return (index.h("div", { class: "iu__item" }, index.h("div", { class: "iu__item-label" + (file.progress ? " modificador " : " modificador ") }, file.downloadURL ?
-          index.h("div", { title: file.name + "(" + this.formatBytes(file.size) + ")", class: "file__name text text--primary text--small text--ellipsis align--middle" }, index.h("a", { href: file.downloadURL, download: true }, file.name, " (", this.formatBytes(file.size), ")"))
-          :
-            index.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 ?
-          index.h("div", { class: "col col--sd-4 col--stretch align--middle" }, index.h("progress", { value: file.progress, max: "100" }))
-          : undefined, index.h("div", { class: "col col--stretch align--middle" }, index.h("button", { class: "btn-cancel ", onClick: () => this.removeFile(file.name, file.xhr) }))));
-      }))
-      : undefined))), index.h("input", { ref: (el) => this._fileInput = el, type: "file", id: "fileInput", hidden: true, onChange: (ev) => this.onFileInputChange(ev), multiple: true })));
+    return (index.h("div", { ref: (el) => this._dropZone = el, class: "iu" }, this.label ? index.h("label", { class: "iu__label", title: this.label }, this.label) : null, index.h("div", { class: "iu__container", onClick: () => this.openFilesDialog() }, index.h("div", { class: "iu__icon-label" }, index.h("button", { class: "iu__file-icon" }), index.h("div", { class: "text text--center text--medium text--primary" }, "Arraste e solte ou clique para adicionar arquivos")), this.buildFooter()), index.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 (index.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 (index.h("div", { class: "iu__item", key: fileName, onClick: evt => evt.stopPropagation() }, index.h("div", { class: "iu__item-label modificador" }, index.h("div", { title: label, class: "col--stretch align--middle file__name text text--primary text--small text--ellipsis align--middle" }, downloadURL ? index.h("a", { href: downloadURL, download: true }, label) : label)), isNaN(progress)
+      ?
+        null
+      :
+        index.h("div", { class: "col col--sd-4 col--stretch align--middle" }, index.h("progress", { id: this.buildProgressId(item), value: progress, max: "100" })), index.h("div", { class: "col col--stretch align--middle" }, index.h("button", { class: "btn-cancel ", onClick: () => this.removeFile(fileName) }))));
+  }
+  get _host() { return index.getElement(this); }
+  static get watchers() { return {
+    "value": ["changeValue"],
+    "requestheaders": ["normalizeRequestHeaders"]
+  }; }
 };
 EzUpload.style = ezUploadCss;
 
@@ -3758,11 +3866,6 @@ let FormMetadata = class {
       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) {
@@ -3775,6 +3878,7 @@ let FormMetadata = class {
         });
         properties.push({ name: "HEADERS", value: JSON.stringify(headers) });
       }
+      this.addPropertyIfExists(properties, element, "maxfiles");
     }
     else {
       if (!label) {

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

@@ -23,7 +23,7 @@ let EzDialog = class {
      */
     this.oppened = false;
   }
-  handleButtonClick(selectedOption) {
+  async handleButtonClick(selectedOption) {
     this.oppened = false;
     this.ezChange.emit(selectedOption);
   }
@@ -32,10 +32,10 @@ let EzDialog = class {
       return (index.h("div", { class: "overlay" }, index.h("div", { class: "dialog" }, index.h("div", { class: this.critical === true ? "dialog__critical--indicator" : "dialog__warning--indicator" }), index.h("div", { class: "dialog__container" }, index.h("div", { class: "title__container" }, index.h("div", { class: "title__box" }, this.personalizedIconPath ?
         index.h("svg", { class: "iconePersonalizado", role: "img" }, index.h("use", { xlinkHref: this.personalizedIconPath }))
         :
-          index.h("div", { class: this.critical ? "title-icon title-icon--critical" : "title-icon" }), index.h("div", { class: "title title--label" }, index.h("h2", null, this.title))), index.h("button", { class: "btn-close", onClick: () => { this.oppened = false; this.ezChange.emit("CANCEL"); } })), index.h("div", { class: "text text--primary text--medium message" }, this.message), this.confirm ?
-        index.h("div", { class: "button-yes-no__container" }, index.h("ez-button", { class: "button__no", mode: "link", label: "N\u00E3o", onClick: () => this.handleButtonClick("N") }), index.h("ez-button", { label: "Ok", onClick: () => this.handleButtonClick("S") }))
+          index.h("div", { class: this.critical ? "title-icon title-icon--critical" : "title-icon" }), index.h("div", { class: "title title--label" }, index.h("h2", null, this.ezTitle))), index.h("button", { class: "btn-close", onClick: () => { this.oppened = false; this.ezChange.emit(false); } })), index.h("div", { class: "text text--primary text--medium message" }, this.message), this.confirm ?
+        index.h("div", { class: "button-yes-no__container" }, index.h("ez-button", { class: "button__no", mode: "link", label: "N\u00E3o", onClick: () => this.handleButtonClick(false) }), index.h("ez-button", { label: "Ok", onClick: () => this.handleButtonClick(true) }))
         : undefined, !this.confirm ?
-        index.h("div", { class: "button__ok--container" }, index.h("ez-button", { label: "Ok", onClick: () => this.handleButtonClick("S") }))
+        index.h("div", { class: "button__ok--container" }, index.h("ez-button", { label: "Ok", onClick: () => this.handleButtonClick(true) }))
         : undefined))));
     }
     return null;

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

@@ -25,9 +25,9 @@ let EzPopup = class {
   }
   render() {
     if (this.opened) {
-      return (index.h(index.Host, null, index.h("div", { class: "overlay" }, index.h("div", { class: "popup col " + this.size }, index.h("div", { class: "popup__container" }, index.h("div", { class: "popup__content" }, index.h("div", { class: "popup__header" }, this.title ?
-        index.h("div", { class: "title popup__title" }, this.title)
-        : undefined, index.h("button", { class: this.title ? "btn-close" : "btn-close btn-close--solo", onClick: () => { this.opened = false; this.ezChange.emit("CANCEL"); } })), index.h("div", { class: "popup__expandable-content" }, index.h("slot", null))))))));
+      return (index.h(index.Host, null, index.h("div", { class: "overlay" }, index.h("div", { class: "popup col " + this.size }, index.h("div", { class: "popup__container" }, index.h("div", { class: "popup__content" }, index.h("div", { class: "popup__header" }, this.ezTitle ?
+        index.h("div", { class: "title popup__title" }, this.ezTitle)
+        : undefined, index.h("button", { class: this.ezTitle ? "btn-close" : "btn-close btn-close--solo", onClick: () => { this.opened = false; this.ezChange.emit("CANCEL"); } })), index.h("div", { class: "popup__expandable-content" }, index.h("slot", null))))))));
     }
     return null;
   }