@sankhyalabs/ezui 1.1.39 → 1.1.43

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (49) hide show
  1. package/dist/cjs/ez-button_16.cjs.entry.js +305 -201
  2. package/dist/cjs/ez-dialog.cjs.entry.js +4 -4
  3. package/dist/cjs/ez-popup.cjs.entry.js +3 -3
  4. package/dist/cjs/ez-toast.cjs.entry.js +37 -0
  5. package/dist/cjs/ezui.cjs.js +1 -1
  6. package/dist/cjs/loader.cjs.js +1 -1
  7. package/dist/collection/collection-manifest.json +2 -1
  8. package/dist/collection/components/ez-dialog/ez-dialog.js +16 -12
  9. package/dist/collection/components/ez-form/assets/trash-can-outline.svg +3 -0
  10. package/dist/collection/components/ez-form/ez-form.js +1 -0
  11. package/dist/collection/components/ez-form/subcomponents/DataUnit.js +2 -1
  12. package/dist/collection/components/ez-form/subcomponents/form-metadata.js +1 -5
  13. package/dist/collection/components/ez-form/subcomponents/structure/Field.js +2 -3
  14. package/dist/collection/components/ez-form/subcomponents/structure/NavigationBar.js +6 -3
  15. package/dist/collection/components/ez-popup/ez-popup.js +5 -5
  16. package/dist/collection/components/ez-toast/ez-toast.css +108 -0
  17. package/dist/collection/components/ez-toast/ez-toast.js +113 -0
  18. package/dist/collection/components/ez-upload/RemoteFile.js +89 -0
  19. package/dist/collection/components/ez-upload/ez-upload.css +23 -3
  20. package/dist/collection/components/ez-upload/ez-upload.js +257 -297
  21. package/dist/collection/utils/Application.js +34 -0
  22. package/dist/custom-elements/index.d.ts +6 -0
  23. package/dist/custom-elements/index.js +350 -212
  24. package/dist/esm/ez-button_16.entry.js +305 -201
  25. package/dist/esm/ez-dialog.entry.js +4 -4
  26. package/dist/esm/ez-popup.entry.js +3 -3
  27. package/dist/esm/ez-toast.entry.js +33 -0
  28. package/dist/esm/ezui.js +1 -1
  29. package/dist/esm/loader.js +1 -1
  30. package/dist/ezui/assets/trash-can-outline.svg +3 -0
  31. package/dist/ezui/ezui.esm.js +1 -1
  32. package/dist/ezui/p-1ff02df6.entry.js +1 -0
  33. package/dist/ezui/p-4a87d740.entry.js +1 -0
  34. package/dist/ezui/p-c12beec1.entry.js +1 -0
  35. package/dist/ezui/p-c3b18332.entry.js +1 -0
  36. package/dist/types/components/ez-dialog/ez-dialog.d.ts +3 -3
  37. package/dist/types/components/ez-popup/ez-popup.d.ts +1 -1
  38. package/dist/types/components/ez-toast/ez-toast.d.ts +17 -0
  39. package/dist/types/components/ez-upload/RemoteFile.d.ts +14 -0
  40. package/dist/types/components/ez-upload/ez-upload.d.ts +51 -57
  41. package/dist/types/components.d.ts +91 -57
  42. package/dist/types/utils/Application.d.ts +6 -0
  43. package/package.json +2 -2
  44. package/react/components.d.ts +1 -0
  45. package/react/components.js +1 -0
  46. package/react/components.js.map +1 -1
  47. package/dist/ezui/p-40fe4f51.entry.js +0 -1
  48. package/dist/ezui/p-c7cee3ae.entry.js +0 -1
  49. package/dist/ezui/p-caa50ec5.entry.js +0 -1
@@ -1327,7 +1327,7 @@ let EzDialog$1 = class extends HTMLElement {
1327
1327
  */
1328
1328
  this.oppened = false;
1329
1329
  }
1330
- handleButtonClick(selectedOption) {
1330
+ async handleButtonClick(selectedOption) {
1331
1331
  this.oppened = false;
1332
1332
  this.ezChange.emit(selectedOption);
1333
1333
  }
@@ -1336,10 +1336,10 @@ let EzDialog$1 = class extends HTMLElement {
1336
1336
  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 ?
1337
1337
  h("svg", { class: "iconePersonalizado", role: "img" }, h("use", { xlinkHref: this.personalizedIconPath }))
1338
1338
  :
1339
- 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 ?
1340
- 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") }))
1339
+ 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 ?
1340
+ 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) }))
1341
1341
  : undefined, !this.confirm ?
1342
- h("div", { class: "button__ok--container" }, h("ez-button", { label: "Ok", onClick: () => this.handleButtonClick("S") }))
1342
+ h("div", { class: "button__ok--container" }, h("ez-button", { label: "Ok", onClick: () => this.handleButtonClick(true) }))
1343
1343
  : undefined))));
1344
1344
  }
1345
1345
  return null;
@@ -2882,10 +2882,47 @@ function showHideNavBtn(state, { buttonName, status }) {
2882
2882
  return Object.assign(Object.assign({}, state), { visibleButtons });
2883
2883
  }
2884
2884
 
2885
- function removeHandler(dataUnit) {
2886
- if (confirm("Tem certeza que deseja Remover?")) {
2887
- dataUnit.remove();
2885
+ class Application {
2886
+ static async showDialog(title, message, icon = null, confirm, critical = false) {
2887
+ return new Promise(resolve => {
2888
+ let dialog = document.querySelector("ez-dialog");
2889
+ if (!dialog) {
2890
+ dialog = document.createElement("ez-dialog");
2891
+ window.document.body.appendChild(dialog);
2892
+ }
2893
+ dialog.ezTitle = title;
2894
+ dialog.message = message;
2895
+ dialog.critical = critical;
2896
+ dialog.confirm = confirm;
2897
+ dialog.personalizedIconPath = icon;
2898
+ dialog.oppened = true;
2899
+ dialog.addEventListener("ezChange", (evt) => resolve(evt.detail));
2900
+ });
2901
+ }
2902
+ static async alert(title, message, icon = null) {
2903
+ return Application.showDialog(title, message, icon, false, false);
2904
+ }
2905
+ static async confirm(title, message, icon = null, critical = false) {
2906
+ return Application.showDialog(title, message, icon, true, critical);
2888
2907
  }
2908
+ static async info(message) {
2909
+ let toast = document.querySelector("ez-toast");
2910
+ if (!toast) {
2911
+ toast = document.createElement("ez-toast");
2912
+ window.document.body.appendChild(toast);
2913
+ }
2914
+ toast.message = message;
2915
+ toast.fadeTime = 4000;
2916
+ toast.show();
2917
+ }
2918
+ }
2919
+
2920
+ function removeHandler(dataUnit) {
2921
+ Application.confirm("Exclusão de registro", "Tem certeza que deseja Remover?", null, true).then(ok => {
2922
+ if (ok) {
2923
+ dataUnit.remove();
2924
+ }
2925
+ });
2889
2926
  }
2890
2927
  const NavigationBar = ({ dataUnit: du, buttonProps, enabled }) => {
2891
2928
  if (buttonProps.previousVisible
@@ -3220,7 +3257,7 @@ class DataUnit {
3220
3257
  });
3221
3258
  const result = this.recordsValidator.validateRecords(this, recordsToValidate, triggedBy);
3222
3259
  if (result.message) {
3223
- alert(result.message);
3260
+ Application.info(result.message);
3224
3261
  }
3225
3262
  return result.isValid;
3226
3263
  }
@@ -3298,10 +3335,9 @@ const Field = ({ dataUnit, field, forceScroll, enabled }) => {
3298
3335
  const target = getProp(properties, 'URL');
3299
3336
  const strHeaders = getProp(properties, 'HEADERS');
3300
3337
  const headers = strHeaders ? JSON.parse(strHeaders) : {};
3338
+ const maxfiles = Number(getProp(properties, "maxfiles") || 0);
3301
3339
  return (h("div", { class: "col col--sd-12 padding--small" },
3302
- h("ez-upload", { onEzChange: (event) => {
3303
- changeFieldHandler(event.target['value']);
3304
- }, target: target, headers: headers, value: value })));
3340
+ h("ez-upload", { value: value, label: formattedLabel, enabled: isEnabled, onEzChange: (event) => changeFieldHandler(event.detail), urlupload: target, requestheaders: headers, maxfiles: maxfiles })));
3305
3341
  case 'DATE':
3306
3342
  return h("div", { class: "col col--sd-12 col--tb-3 padding--small" }, loadingData ? h("place-holder", null) :
3307
3343
  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 }));
@@ -3625,6 +3661,7 @@ let EzForm$1 = class extends HTMLElement {
3625
3661
  render() {
3626
3662
  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;
3627
3663
  }
3664
+ static get assetsDirs() { return ["assets"]; }
3628
3665
  get _host() { return this; }
3629
3666
  static get watchers() { return {
3630
3667
  "metadata": ["cleanPreparedMetadata"]
@@ -4320,9 +4357,9 @@ let EzPopup$1 = class extends HTMLElement {
4320
4357
  }
4321
4358
  render() {
4322
4359
  if (this.opened) {
4323
- 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 ?
4324
- h("div", { class: "title popup__title" }, this.title)
4325
- : 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))))))));
4360
+ 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 ?
4361
+ h("div", { class: "title popup__title" }, this.ezTitle)
4362
+ : 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))))))));
4326
4363
  }
4327
4364
  return null;
4328
4365
  }
@@ -5055,144 +5092,252 @@ let EzTimeInput$1 = class extends HTMLElement {
5055
5092
  static get style() { return ezTimeInputCss; }
5056
5093
  };
5057
5094
 
5058
- 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%}}";
5095
+ 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}}";
5096
+
5097
+ let EzToast$1 = class extends HTMLElement {
5098
+ constructor() {
5099
+ super();
5100
+ this.__registerHost();
5101
+ this.__attachShadow();
5102
+ /**
5103
+ * Controla o tempo de exibição do componente em milissegundos.
5104
+ */
5105
+ this.fadeTime = 5000;
5106
+ /**
5107
+ * Adiciona ícone de check no componente.
5108
+ */
5109
+ this.useIcon = false;
5110
+ }
5111
+ async show() {
5112
+ this.container.classList.add("toast__container--oppened");
5113
+ this.container.style.animation = `fadein 0.5s, fadeout 0.5s ${this.fadeTime / 1000}s`;
5114
+ setTimeout(() => {
5115
+ this.container.classList.remove("toast__container--oppened");
5116
+ this.container.style.animation = `none`;
5117
+ }, this.fadeTime + 400);
5118
+ }
5119
+ render() {
5120
+ return (h("div", { ref: (el) => this.container = el, class: "toast__container" }, this.useIcon ?
5121
+ h("slot", { name: "icon" })
5122
+ : 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`; } })));
5123
+ }
5124
+ static get style() { return ezToastCss; }
5125
+ };
5126
+
5127
+ class RemoteFile {
5128
+ constructor(file) {
5129
+ this.file = file;
5130
+ this.size = file.size;
5131
+ this.name = file.name;
5132
+ }
5133
+ abortUpload() {
5134
+ if (this._uploadingXhr) {
5135
+ this._aborted = true;
5136
+ this._uploadingXhr.abort();
5137
+ this._uploadingXhr = undefined;
5138
+ }
5139
+ }
5140
+ isUploading() {
5141
+ return this._uploadingXhr !== undefined;
5142
+ }
5143
+ async upload(server, headers, updateCallBack) {
5144
+ return new Promise((resolve, reject) => {
5145
+ const xhr = new XMLHttpRequest();
5146
+ this._uploadingXhr = xhr;
5147
+ this._aborted = false;
5148
+ this.progress = 0;
5149
+ xhr.upload.onprogress = (e) => {
5150
+ const loaded = e.loaded;
5151
+ const total = e.total;
5152
+ this.progress = ~~((loaded / total) * 100);
5153
+ updateCallBack(this, loaded, total);
5154
+ };
5155
+ xhr.onreadystatechange = () => {
5156
+ if (xhr.readyState == 4) {
5157
+ this._uploadingXhr = undefined;
5158
+ const status = xhr.status;
5159
+ if (!this._aborted) {
5160
+ if (status === 0) {
5161
+ reject("Servidor indisponível");
5162
+ }
5163
+ else if (status >= 500) {
5164
+ reject("Erro inesperado no servidor");
5165
+ }
5166
+ else if (status >= 400) {
5167
+ reject("Operação não permitida");
5168
+ }
5169
+ }
5170
+ const response = xhr.response;
5171
+ if (response) {
5172
+ resolve(JSON.parse(response));
5173
+ }
5174
+ }
5175
+ };
5176
+ xhr.ontimeout = () => {
5177
+ reject("Tempo limite de transferência atingido.");
5178
+ };
5179
+ const formData = new FormData();
5180
+ formData.append("ARQUIVO", this.file, this.file.name);
5181
+ xhr.open("POST", server, true);
5182
+ if (headers) {
5183
+ headers.forEach((value, key) => xhr.setRequestHeader(key, value));
5184
+ }
5185
+ xhr.send(formData);
5186
+ });
5187
+ }
5188
+ async delete(item, server, headers) {
5189
+ return new Promise((resolve, reject) => {
5190
+ const xhr = new XMLHttpRequest();
5191
+ xhr.onreadystatechange = () => {
5192
+ if (xhr.readyState == 4) {
5193
+ if (xhr.status === 0) {
5194
+ reject("Servidor indisponível");
5195
+ }
5196
+ else if (xhr.status >= 500) {
5197
+ reject("Erro inesperado no servidor");
5198
+ }
5199
+ else if (xhr.status >= 400) {
5200
+ reject("Operação não permitida");
5201
+ }
5202
+ resolve(true);
5203
+ }
5204
+ };
5205
+ xhr.ontimeout = () => {
5206
+ reject("Tempo limite de remoção atingido.");
5207
+ };
5208
+ xhr.open("DELETE", server, true);
5209
+ if (headers) {
5210
+ headers.forEach((value, key) => xhr.setRequestHeader(key, value));
5211
+ }
5212
+ xhr.send(JSON.stringify(item));
5213
+ });
5214
+ }
5215
+ }
5216
+
5217
+ 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%}}";
5059
5218
 
5060
5219
  let EzUpload$1 = class extends HTMLElement {
5061
5220
  constructor() {
5062
5221
  super();
5063
5222
  this.__registerHost();
5064
5223
  this.__attachShadow();
5065
- this.validatedEvent = createEvent(this, "validatedEvent", 7);
5066
- this.initUploadEvent = createEvent(this, "initUploadEvent", 7);
5067
- this.finishedUploadEvent = createEvent(this, "finishedUploadEvent", 7);
5068
5224
  this.ezChange = createEvent(this, "ezChange", 7);
5225
+ this._filePointers = new Map();
5226
+ /**
5227
+ * Deixa o campo disponível ou não para digitação.
5228
+ */
5229
+ this.enabled = true;
5069
5230
  }
5070
- fileListChange() {
5071
- this.ezChange.emit({ value: this.value });
5231
+ changeValue(newValue) {
5232
+ if (newValue !== this._updatingValue) {
5233
+ this._filePointers.forEach(f => {
5234
+ if (this.isRemoteFile(f)) {
5235
+ f.abortUpload();
5236
+ }
5237
+ });
5238
+ this._filePointers = new Map();
5239
+ this.updateFilePointers();
5240
+ }
5241
+ this._updatingValue = undefined;
5072
5242
  }
5073
- addFiles(files) {
5074
- Array.prototype.forEach.call(files, this.addFile.bind(this));
5243
+ updateFilePointers() {
5244
+ if (this.value) {
5245
+ this.value.forEach(ezFile => this._filePointers.set(ezFile.name, ezFile));
5246
+ }
5075
5247
  }
5076
- addFile(file) {
5077
- this.errorMessage = undefined;
5078
- if (this.validateFile(file)) {
5079
- if (this.target) {
5080
- this._uploadFile(file);
5248
+ normalizeRequestHeaders() {
5249
+ this._requestHeaders = new Map();
5250
+ if (typeof this.requestheaders == 'string') {
5251
+ try {
5252
+ this.requestheaders = JSON.parse(this.requestheaders);
5081
5253
  }
5082
- else {
5083
- this.errorMessage = "Endereço de upload não informado";
5084
- alert(this.errorMessage);
5254
+ catch (e) {
5255
+ this.requestheaders = undefined;
5085
5256
  }
5086
5257
  }
5087
- else {
5088
- if (this.errorMessage && this.errorMessage.length > 0) {
5089
- alert(this.errorMessage);
5090
- }
5258
+ for (var key in this.requestheaders) {
5259
+ this._requestHeaders.set(key, this.requestheaders[key]);
5091
5260
  }
5092
5261
  }
5093
- validateFile(file) {
5094
- this.errorMessage = '';
5095
- let isValid = true;
5096
- if (this.maxFileSize >= 0 && file.size > this.maxFileSize) {
5097
- this.errorMessage = 'O tamanho máximo dos arquivos é de ' + this.formatBytes(this.maxFileSize);
5098
- isValid = false;
5099
- }
5100
- this.validatedEvent.emit({ isValid: isValid, fileName: file.name });
5101
- return isValid;
5102
- }
5103
- _uploadFile(file) {
5104
- const xhr = (file.xhr = this._createXhr());
5105
- const newValue = this.value ? [...this.value] : [];
5106
- newValue.push({ name: file.name, size: file.size, xhr: file.xhr });
5107
- let stalledId;
5108
- xhr.upload.onprogress = (e) => {
5109
- clearTimeout(stalledId);
5110
- const loaded = e.loaded, total = e.total, progress = ~~((loaded / total) * 100);
5111
- let viewFile = newValue.find(f => f.name === file.name);
5112
- if (viewFile) {
5113
- viewFile.progress = progress;
5114
- }
5115
- };
5116
- xhr.onreadystatechange = () => {
5117
- this.errorMessage = '';
5118
- if (xhr.readyState == 4) {
5119
- clearTimeout(stalledId);
5120
- file.indeterminate = file.uploading = false;
5121
- if (xhr.status === 0) ;
5122
- else if (xhr.status >= 500) {
5123
- this.errorMessage = "Erro inesperado no servidor";
5124
- }
5125
- else if (xhr.status >= 400) {
5126
- this.errorMessage = "Operação não permitida";
5127
- }
5128
- if (this.errorMessage && this.errorMessage.length > 0) {
5129
- //TODO
5130
- // Conferir com o time de UX um estado de erro ou remoção da lista
5131
- // this.removeFile(file.name);
5132
- alert(this.errorMessage);
5133
- }
5134
- else {
5135
- if (xhr.response) {
5136
- let response = JSON.parse(xhr.response);
5137
- response.forEach(element => {
5138
- let viewFile = newValue.find(f => f.name === this.decode_utf8(element.name));
5139
- if (viewFile) {
5140
- viewFile.progress = undefined;
5141
- //Validar estado de erro com UX
5142
- viewFile.error = false;
5143
- delete viewFile.xhr;
5144
- viewFile.downloadURL = element.downloadURL;
5145
- viewFile.lastModifiedDate = element.lastModifiedDate;
5146
- viewFile.properties = element.properties;
5147
- }
5148
- });
5149
- this.value = newValue;
5150
- this.fileListChange();
5151
- }
5152
- else {
5153
- let viewFile = newValue.find(f => f.name === file.name);
5154
- viewFile.progress = undefined;
5155
- //Validar estado de erro com UX
5156
- viewFile.error = true;
5262
+ async addFiles(files) {
5263
+ Array.prototype.forEach.call(files, this.addFile.bind(this));
5264
+ }
5265
+ async addFile(file) {
5266
+ const oldFile = this._filePointers.get(file.name);
5267
+ if (oldFile) {
5268
+ Application.confirm("Substituir arquivo", `Já existe um arquivo chamado "${file.name}". Deseja substituí-lo?`)
5269
+ .then(ok => {
5270
+ if (ok) {
5271
+ if (this.isRemoteFile(oldFile)) {
5272
+ oldFile.abortUpload();
5157
5273
  }
5274
+ this.doAddFile(file);
5158
5275
  }
5276
+ });
5277
+ }
5278
+ else {
5279
+ this.doAddFile(file);
5280
+ }
5281
+ }
5282
+ async doAddFile(file) {
5283
+ if (this.validateFile(file)) {
5284
+ const uploadingFile = new RemoteFile(file);
5285
+ this._filePointers.set(file.name, uploadingFile);
5286
+ uploadingFile.upload(this.urlupload, this._requestHeaders, (file) => this.updateFeedback(file))
5287
+ .then((files) => files.forEach(ezFile => this.finishUpload(ezFile)))
5288
+ .catch(msg => this.showError(msg));
5289
+ forceUpdate(this);
5290
+ }
5291
+ }
5292
+ finishUpload(ezFile) {
5293
+ this._filePointers.set(ezFile.name, ezFile);
5294
+ this.updateValue();
5295
+ }
5296
+ updateValue() {
5297
+ this._updatingValue = [];
5298
+ this._filePointers.forEach(f => {
5299
+ if (!this.isRemoteFile(f)) {
5300
+ this._updatingValue.push(f);
5159
5301
  }
5160
- };
5161
- xhr.ontimeout = () => {
5162
- if (this.errorMessage && this.errorMessage.length > 0) {
5163
- this.errorMessage.concat(" / Tempo expirado");
5164
- this.removeFile(file.name);
5165
- alert(this.errorMessage);
5166
- }
5167
- };
5168
- const formData = new FormData();
5169
- formData.append(this.formDataName, file, file.name);
5170
- xhr.open("POST", this.target, true);
5171
- this._configureXhr(xhr);
5172
- file.status = "conectando";
5173
- file.uploading = file.indeterminate = true;
5174
- file.complete = file.abort = file.error = file.held = false;
5175
- xhr.send(formData);
5176
- }
5177
- _createXhr() {
5178
- return new XMLHttpRequest();
5179
- }
5180
- _configureXhr(xhr) {
5181
- if (typeof this.headers == 'string') {
5182
- try {
5183
- this.headers = JSON.parse(this.headers);
5184
- }
5185
- catch (e) {
5186
- this.headers = undefined;
5302
+ });
5303
+ this.value = this._updatingValue;
5304
+ this.ezChange.emit(this.value);
5305
+ }
5306
+ buildProgressId(uploading) {
5307
+ let sanitizedName = uploading.name.replace(/[^a-z0-9_]/gi, '_');
5308
+ return `PROGRESS_${sanitizedName}_${uploading.file.lastModified}`;
5309
+ }
5310
+ updateFeedback(uf) {
5311
+ window.requestAnimationFrame(() => {
5312
+ if (this._host) {
5313
+ const progress = this._host.shadowRoot.querySelector('#' + this.buildProgressId(uf));
5314
+ if (progress) {
5315
+ progress.value = uf.progress;
5316
+ }
5187
5317
  }
5318
+ });
5319
+ }
5320
+ validateFile(file) {
5321
+ if (this.maxfiles > 0 && this._filePointers.size >= this.maxfiles) {
5322
+ this.showError(`A quantidade máxima de arquivos é ${this.maxfiles}.`);
5323
+ return false;
5324
+ }
5325
+ if (file.size === 0) {
5326
+ this.showError(`Erro de permissão: O arquivo "${file.name}" não pode ser enviado.`);
5327
+ return false;
5188
5328
  }
5189
- for (var key in this.headers) {
5190
- xhr.setRequestHeader(key, this.headers[key]);
5329
+ if (!this.urlupload) {
5330
+ this.showError("Endereço de upload não informado");
5331
+ return false;
5191
5332
  }
5192
- if (this.timeout) {
5193
- xhr.timeout = this.timeout;
5333
+ if (this.maxfilesize >= 0 && file.size > this.maxfilesize) {
5334
+ this.showError("O tamanho máximo dos arquivos é de " + this.formatBytes(this.maxfilesize));
5335
+ return false;
5194
5336
  }
5195
- xhr.withCredentials = this.withCredentials;
5337
+ return true;
5338
+ }
5339
+ showError(message) {
5340
+ Application.alert("Enviando arquivo", message);
5196
5341
  }
5197
5342
  formatBytes(bytes, decimals = 1) {
5198
5343
  if (bytes === 0)
@@ -5204,97 +5349,92 @@ let EzUpload$1 = class extends HTMLElement {
5204
5349
  return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + ' ' + sizes[i];
5205
5350
  }
5206
5351
  onFileInputChange(event) {
5207
- this.addFiles(event.target.files);
5352
+ const input = event.target;
5353
+ this.addFiles(Array.from(input.files));
5208
5354
  this._fileInput.value = '';
5209
5355
  }
5210
- /*componentWillLoad() {
5211
- if (this.fileList?.length > 0) {
5212
- this.fileList.forEach(item => {
5213
- if (item.size) {
5214
- item.strSize = this.formatBytes(item.size);
5215
- }
5216
- })
5217
- this.fileList = [...this.fileList];
5356
+ isRemoteFile(item) {
5357
+ return "file" in item;
5358
+ }
5359
+ removeFromList(name) {
5360
+ this._filePointers.delete(name);
5361
+ this.updateValue();
5362
+ }
5363
+ removeFile(name) {
5364
+ const item = this._filePointers.get(name);
5365
+ if (this.isRemoteFile(item)) {
5366
+ item.abortUpload();
5367
+ this.removeFromList(name);
5368
+ }
5369
+ else {
5370
+ if (this.urldelete) {
5371
+ const uploadingFile = new RemoteFile(null);
5372
+ this._filePointers.set(item.name, uploadingFile);
5373
+ uploadingFile.delete(item, this.urldelete, null)
5374
+ .then(_ok => this.removeFromList(name))
5375
+ .catch(msg => this.showError(msg));
5376
+ }
5377
+ else {
5378
+ this.removeFromList(name);
5379
+ }
5380
+ }
5381
+ }
5382
+ openFilesDialog() {
5383
+ if (this.maxfiles > 0 && this._filePointers.size >= this.maxfiles) {
5384
+ this.showError(`A quantidade máxima de arquivos é ${this.maxfiles}.`);
5385
+ }
5386
+ else {
5387
+ this._fileInput.click();
5218
5388
  }
5219
- }*/
5220
- decode_utf8(s) {
5221
- return decodeURIComponent(escape(s));
5222
5389
  }
5223
5390
  componentDidLoad() {
5224
- if (this.dropZone && window.FileList && window.File) {
5225
- this.dropZone.addEventListener('dragover', event => {
5391
+ if (this._dropZone && window.FileList && window.File) {
5392
+ this._dropZone.addEventListener('dragover', event => {
5226
5393
  event.stopPropagation();
5227
5394
  event.preventDefault();
5228
5395
  event.dataTransfer.dropEffect = 'copy';
5229
5396
  });
5230
- this.dropZone.addEventListener('drop', event => {
5397
+ this._dropZone.addEventListener('drop', event => {
5231
5398
  event.stopPropagation();
5232
5399
  event.preventDefault();
5233
- this.addFiles(event.dataTransfer.files);
5400
+ this.addFiles(Array.from(event.dataTransfer.files));
5234
5401
  });
5235
5402
  }
5236
5403
  }
5237
- removeFile(name, xhr, downloadURL) {
5238
- if (xhr) {
5239
- xhr.abort();
5240
- }
5241
- if (downloadURL) {
5242
- this.removeFileFromServer(name, downloadURL);
5243
- }
5244
- this.value = [...this.value.filter(function (value) { return value.name !== name; })];
5245
- this.fileListChange();
5246
- }
5247
- removeFileFromServer(name, donwloadURL) {
5248
- const xhr = this._createXhr();
5249
- this.errorMessage = '';
5250
- let stalledId;
5251
- xhr.onreadystatechange = () => {
5252
- if (xhr.readyState == 4) {
5253
- clearTimeout(stalledId);
5254
- if (xhr.status === 0) {
5255
- this.errorMessage = "Servidor indisponível";
5256
- }
5257
- else if (xhr.status >= 500) {
5258
- this.errorMessage = "Erro inesperado no servidor";
5259
- }
5260
- else if (xhr.status >= 400) {
5261
- this.errorMessage = "Operação não permitida";
5262
- }
5263
- if (this.errorMessage && this.errorMessage.length > 0) {
5264
- //TODO
5265
- // Conferir com o time de UX um estado de erro ou remoção da lista
5266
- // this.removeFile(file.name);
5267
- alert(this.errorMessage);
5268
- }
5269
- }
5270
- };
5271
- xhr.ontimeout = () => {
5272
- if (this.errorMessage && this.errorMessage.length > 0) {
5273
- alert(this.errorMessage);
5404
+ componentWillRender() {
5405
+ if (this.value) {
5406
+ if (this._filePointers.size < this.value.length) {
5407
+ this.updateFilePointers();
5274
5408
  }
5275
- };
5276
- const body = JSON.stringify({
5277
- name: name,
5278
- donwloadURL: donwloadURL,
5279
- });
5280
- xhr.open("DELETE", this.target, true);
5281
- xhr.setRequestHeader('Content-Type', 'application/json');
5282
- this._configureXhr(xhr);
5283
- xhr.send(body);
5409
+ }
5284
5410
  }
5285
5411
  render() {
5286
- var _a;
5287
- 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 ?
5288
- h("div", { class: "iu__footer" }, this.value.map(file => {
5289
- return (h("div", { class: "iu__item" }, h("div", { class: "iu__item-label" + (file.progress ? " modificador " : " modificador ") }, file.downloadURL ?
5290
- 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), ")"))
5291
- :
5292
- 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 ?
5293
- h("div", { class: "col col--sd-4 col--stretch align--middle" }, h("progress", { value: file.progress, max: "100" }))
5294
- : undefined, h("div", { class: "col col--stretch align--middle" }, h("button", { class: "btn-cancel ", onClick: () => this.removeFile(file.name, file.xhr) }))));
5295
- }))
5296
- : undefined))), h("input", { ref: (el) => this._fileInput = el, type: "file", id: "fileInput", hidden: true, onChange: (ev) => this.onFileInputChange(ev), multiple: true })));
5412
+ 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 })));
5297
5413
  }
5414
+ buildFooter() {
5415
+ if (this._filePointers.size === 0) {
5416
+ return null;
5417
+ }
5418
+ const items = [];
5419
+ this._filePointers.forEach(item => items.push(this.buildFileItem(item)));
5420
+ return (h("div", { class: "iu__footer" }, items));
5421
+ }
5422
+ buildFileItem(item) {
5423
+ const fileName = item.name;
5424
+ const progress = Number(item['progress']);
5425
+ const downloadURL = item['downloadURL'];
5426
+ const label = `${fileName} (${this.formatBytes(item.size)})`;
5427
+ 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)
5428
+ ?
5429
+ null
5430
+ :
5431
+ 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) }))));
5432
+ }
5433
+ get _host() { return this; }
5434
+ static get watchers() { return {
5435
+ "value": ["changeValue"],
5436
+ "requestheaders": ["normalizeRequestHeaders"]
5437
+ }; }
5298
5438
  static get style() { return ezUploadCss; }
5299
5439
  };
5300
5440
 
@@ -5322,11 +5462,6 @@ let FormMetadata$1 = class extends HTMLElement {
5322
5462
  properties.push({ name: "options", value: JSON.stringify(objOpts) });
5323
5463
  }
5324
5464
  else if (userInterface === "FILE") {
5325
- /*<URL>http://localhost:8080/2a3skw-graphql/uploadFiles</URL>
5326
- <HEADERS>
5327
- <HEADER NAME="Authorization">dsfs</HEADER>
5328
- </HEADER>
5329
- </field> */
5330
5465
  const urlElement = element.querySelector('URL');
5331
5466
  const headersElement = element.querySelectorAll('HEADERS>HEADER');
5332
5467
  if (urlElement) {
@@ -5339,6 +5474,7 @@ let FormMetadata$1 = class extends HTMLElement {
5339
5474
  });
5340
5475
  properties.push({ name: "HEADERS", value: JSON.stringify(headers) });
5341
5476
  }
5477
+ this.addPropertyIfExists(properties, element, "maxfiles");
5342
5478
  }
5343
5479
  else {
5344
5480
  if (!label) {
@@ -5445,7 +5581,7 @@ const EzCheck = /*@__PURE__*/proxyCustomElement(EzCheck$1, [1,"ez-check",{"label
5445
5581
  const EzCollapsableBox = /*@__PURE__*/proxyCustomElement(EzCollapsableBox$1, [1,"ez-collapsable-box",{"value":[1540],"label":[513]}]);
5446
5582
  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]}]);
5447
5583
  const EzDateInput = /*@__PURE__*/proxyCustomElement(EzDateInput$1, [1,"ez-date-input",{"label":[513],"value":[1040],"enabled":[516],"errormessage":[1537]}]);
5448
- const EzDialog = /*@__PURE__*/proxyCustomElement(EzDialog$1, [1,"ez-dialog",{"confirm":[1028],"critical":[1028],"message":[1025],"oppened":[1540],"personalizedIconPath":[1025,"personalized-icon-path"],"title":[1025]}]);
5584
+ 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"]}]);
5449
5585
  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]}]);
5450
5586
  const EzIcon = /*@__PURE__*/proxyCustomElement(EzIcon$1, [1,"ez-icon",{"size":[513],"href":[513]}]);
5451
5587
  const EzLabelChip = /*@__PURE__*/proxyCustomElement(EzLabelChip$1, [1,"ez-label-chip",{"label":[513],"enabled":[516],"removable":[516],"value":[1540]}]);
@@ -5453,13 +5589,14 @@ const EzModal = /*@__PURE__*/proxyCustomElement(EzModal$1, [1,"ez-modal",{"modal
5453
5589
  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]}]);
5454
5590
  const EzNumericInput = /*@__PURE__*/proxyCustomElement(EzNumericInput$1, [1,"ez-numeric-input",{"label":[513],"value":[1538],"enabled":[516],"errormessage":[1537],"precision":[8],"prettyprecision":[8]}]);
5455
5591
  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"]}]);
5456
- const EzPopup = /*@__PURE__*/proxyCustomElement(EzPopup$1, [1,"ez-popup",{"size":[1],"opened":[1540],"useHeader":[1540,"use-header"],"title":[1]}]);
5592
+ const EzPopup = /*@__PURE__*/proxyCustomElement(EzPopup$1, [1,"ez-popup",{"size":[1],"opened":[1540],"useHeader":[1540,"use-header"],"ezTitle":[1,"ez-title"]}]);
5457
5593
  const EzSearch = /*@__PURE__*/proxyCustomElement(EzSearch$1, [1,"ez-search",{"value":[1537],"label":[1537],"enabled":[1540],"errormessage":[1537],"optionloader":[16],"showselectedvalue":[4],"showoptionvalue":[4]}]);
5458
5594
  const EzTabselector = /*@__PURE__*/proxyCustomElement(EzTabselector$1, [1,"ez-tabselector",{"selectedindex":[1537],"selectedtab":[1537],"tabs":[1]}]);
5459
5595
  const EzTextArea = /*@__PURE__*/proxyCustomElement(EzTextArea$1, [1,"ez-text-area",{"label":[513],"value":[1537],"enabled":[516],"loading":[516],"errormessage":[1537],"rows":[1538]}]);
5460
5596
  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]}]);
5461
5597
  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"]}]);
5462
- 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]}]);
5598
+ const EzToast = /*@__PURE__*/proxyCustomElement(EzToast$1, [1,"ez-toast",{"message":[1025],"fadeTime":[1026,"fade-time"],"useIcon":[1028,"use-icon"]}]);
5599
+ 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]}]);
5463
5600
  const FormMetadata = /*@__PURE__*/proxyCustomElement(FormMetadata$1, [1,"form-metadata",{"name":[1],"label":[1],"dataunit":[1025],"many":[4],"autoload":[4],"metadata":[1040]}]);
5464
5601
  const PlaceHolder = /*@__PURE__*/proxyCustomElement(PlaceHolder$1, [1,"place-holder"]);
5465
5602
  const defineCustomElements = (opts) => {
@@ -5486,6 +5623,7 @@ const defineCustomElements = (opts) => {
5486
5623
  EzTextArea,
5487
5624
  EzTextInput,
5488
5625
  EzTimeInput,
5626
+ EzToast,
5489
5627
  EzUpload,
5490
5628
  FormMetadata,
5491
5629
  PlaceHolder
@@ -5497,4 +5635,4 @@ const defineCustomElements = (opts) => {
5497
5635
  }
5498
5636
  };
5499
5637
 
5500
- 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 };
5638
+ 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 };