@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.
- package/dist/cjs/ez-button_16.cjs.entry.js +305 -201
- package/dist/cjs/ez-dialog.cjs.entry.js +4 -4
- package/dist/cjs/ez-popup.cjs.entry.js +3 -3
- package/dist/cjs/ez-toast.cjs.entry.js +37 -0
- package/dist/cjs/ezui.cjs.js +1 -1
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/collection/collection-manifest.json +2 -1
- package/dist/collection/components/ez-dialog/ez-dialog.js +16 -12
- package/dist/collection/components/ez-form/assets/trash-can-outline.svg +3 -0
- package/dist/collection/components/ez-form/ez-form.js +1 -0
- package/dist/collection/components/ez-form/subcomponents/DataUnit.js +2 -1
- package/dist/collection/components/ez-form/subcomponents/form-metadata.js +1 -5
- package/dist/collection/components/ez-form/subcomponents/structure/Field.js +2 -3
- package/dist/collection/components/ez-form/subcomponents/structure/NavigationBar.js +6 -3
- package/dist/collection/components/ez-popup/ez-popup.js +5 -5
- package/dist/collection/components/ez-toast/ez-toast.css +108 -0
- package/dist/collection/components/ez-toast/ez-toast.js +113 -0
- package/dist/collection/components/ez-upload/RemoteFile.js +89 -0
- package/dist/collection/components/ez-upload/ez-upload.css +23 -3
- package/dist/collection/components/ez-upload/ez-upload.js +257 -297
- package/dist/collection/utils/Application.js +34 -0
- package/dist/custom-elements/index.d.ts +6 -0
- package/dist/custom-elements/index.js +350 -212
- package/dist/esm/ez-button_16.entry.js +305 -201
- package/dist/esm/ez-dialog.entry.js +4 -4
- package/dist/esm/ez-popup.entry.js +3 -3
- package/dist/esm/ez-toast.entry.js +33 -0
- package/dist/esm/ezui.js +1 -1
- package/dist/esm/loader.js +1 -1
- package/dist/ezui/assets/trash-can-outline.svg +3 -0
- package/dist/ezui/ezui.esm.js +1 -1
- package/dist/ezui/p-1ff02df6.entry.js +1 -0
- package/dist/ezui/p-4a87d740.entry.js +1 -0
- package/dist/ezui/p-c12beec1.entry.js +1 -0
- package/dist/ezui/p-c3b18332.entry.js +1 -0
- package/dist/types/components/ez-dialog/ez-dialog.d.ts +3 -3
- package/dist/types/components/ez-popup/ez-popup.d.ts +1 -1
- package/dist/types/components/ez-toast/ez-toast.d.ts +17 -0
- package/dist/types/components/ez-upload/RemoteFile.d.ts +14 -0
- package/dist/types/components/ez-upload/ez-upload.d.ts +51 -57
- package/dist/types/components.d.ts +91 -57
- package/dist/types/utils/Application.d.ts +6 -0
- package/package.json +2 -2
- package/react/components.d.ts +1 -0
- package/react/components.js +1 -0
- package/react/components.js.map +1 -1
- package/dist/ezui/p-40fe4f51.entry.js +0 -1
- package/dist/ezui/p-c7cee3ae.entry.js +0 -1
- 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.
|
|
1340
|
-
h("div", { class: "button-yes-no__container" }, h("ez-button", { class: "button__no", mode: "link", label: "N\u00E3o", onClick: () => this.handleButtonClick(
|
|
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(
|
|
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
|
-
|
|
2886
|
-
|
|
2887
|
-
|
|
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
|
-
|
|
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.
|
|
4324
|
-
h("div", { class: "title popup__title" }, this.
|
|
4325
|
-
: undefined, h("button", { class: this.
|
|
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
|
|
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
|
-
|
|
5071
|
-
|
|
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
|
-
|
|
5074
|
-
|
|
5243
|
+
updateFilePointers() {
|
|
5244
|
+
if (this.value) {
|
|
5245
|
+
this.value.forEach(ezFile => this._filePointers.set(ezFile.name, ezFile));
|
|
5246
|
+
}
|
|
5075
5247
|
}
|
|
5076
|
-
|
|
5077
|
-
this.
|
|
5078
|
-
if (this.
|
|
5079
|
-
|
|
5080
|
-
this.
|
|
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
|
-
|
|
5083
|
-
this.
|
|
5084
|
-
alert(this.errorMessage);
|
|
5254
|
+
catch (e) {
|
|
5255
|
+
this.requestheaders = undefined;
|
|
5085
5256
|
}
|
|
5086
5257
|
}
|
|
5087
|
-
|
|
5088
|
-
|
|
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
|
-
|
|
5094
|
-
this.
|
|
5095
|
-
|
|
5096
|
-
|
|
5097
|
-
|
|
5098
|
-
|
|
5099
|
-
|
|
5100
|
-
|
|
5101
|
-
|
|
5102
|
-
|
|
5103
|
-
|
|
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
|
-
|
|
5162
|
-
|
|
5163
|
-
|
|
5164
|
-
|
|
5165
|
-
|
|
5166
|
-
|
|
5167
|
-
|
|
5168
|
-
|
|
5169
|
-
|
|
5170
|
-
|
|
5171
|
-
|
|
5172
|
-
|
|
5173
|
-
|
|
5174
|
-
|
|
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
|
-
|
|
5190
|
-
|
|
5329
|
+
if (!this.urlupload) {
|
|
5330
|
+
this.showError("Endereço de upload não informado");
|
|
5331
|
+
return false;
|
|
5191
5332
|
}
|
|
5192
|
-
if (this.
|
|
5193
|
-
|
|
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
|
-
|
|
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
|
-
|
|
5352
|
+
const input = event.target;
|
|
5353
|
+
this.addFiles(Array.from(input.files));
|
|
5208
5354
|
this._fileInput.value = '';
|
|
5209
5355
|
}
|
|
5210
|
-
|
|
5211
|
-
|
|
5212
|
-
|
|
5213
|
-
|
|
5214
|
-
|
|
5215
|
-
|
|
5216
|
-
|
|
5217
|
-
|
|
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.
|
|
5225
|
-
this.
|
|
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.
|
|
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
|
-
|
|
5238
|
-
if (
|
|
5239
|
-
|
|
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
|
-
|
|
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"],"
|
|
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"],"
|
|
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
|
|
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 };
|