@sankhyalabs/ezui 1.1.41 → 1.1.45
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 +49 -17
- package/dist/collection/components/ez-form/subcomponents/structure/Field.js +1 -1
- package/dist/collection/components/ez-icon/ez-icon.js +10 -3
- package/dist/collection/components/ez-upload/ez-upload.css +26 -2
- package/dist/collection/components/ez-upload/ez-upload.js +44 -19
- package/dist/custom-elements/index.js +49 -17
- package/dist/esm/ez-button_16.entry.js +49 -17
- package/dist/ezui/ezui.esm.js +1 -1
- package/dist/ezui/{p-e9784201.entry.js → p-237ba802.entry.js} +1 -1
- package/dist/types/components/ez-icon/ez-icon.d.ts +1 -0
- package/dist/types/components/ez-upload/ez-upload.d.ts +5 -2
- package/package.json +2 -2
|
@@ -2592,7 +2592,7 @@ const Field = ({ dataUnit, field, forceScroll, enabled }) => {
|
|
|
2592
2592
|
const strHeaders = getProp(properties, 'HEADERS');
|
|
2593
2593
|
const headers = strHeaders ? JSON.parse(strHeaders) : {};
|
|
2594
2594
|
const maxfiles = Number(getProp(properties, "maxfiles") || 0);
|
|
2595
|
-
return (index.h("div", { class: "col col--sd-12 padding--small" },
|
|
2595
|
+
return (index.h("div", { class: "col col--sd-12 padding--small" }, loadingData ? index.h("place-holder", null) :
|
|
2596
2596
|
index.h("ez-upload", { value: value, label: formattedLabel, enabled: isEnabled, onEzChange: (event) => changeFieldHandler(event.detail), urlupload: target, requestheaders: headers, maxfiles: maxfiles })));
|
|
2597
2597
|
case 'DATE':
|
|
2598
2598
|
return index.h("div", { class: "col col--sd-12 col--tb-3 padding--small" }, loadingData ? index.h("place-holder", null) :
|
|
@@ -2932,8 +2932,15 @@ let EzIcon = class {
|
|
|
2932
2932
|
/*Tamanho do icone*/
|
|
2933
2933
|
this.size = 'medium';
|
|
2934
2934
|
}
|
|
2935
|
+
isSprite() {
|
|
2936
|
+
return this.href && this.href.indexOf('#') > -1;
|
|
2937
|
+
}
|
|
2935
2938
|
render() {
|
|
2936
|
-
return (index.h(
|
|
2939
|
+
return (index.h(index.Host, null, this.isSprite()
|
|
2940
|
+
?
|
|
2941
|
+
index.h("svg", { class: this.size, role: "img" }, index.h("use", { xlinkHref: this.href }))
|
|
2942
|
+
:
|
|
2943
|
+
index.h("img", { class: this.size, src: this.href })));
|
|
2937
2944
|
}
|
|
2938
2945
|
};
|
|
2939
2946
|
EzIcon.style = ezIconCss;
|
|
@@ -3622,7 +3629,7 @@ class RemoteFile {
|
|
|
3622
3629
|
}
|
|
3623
3630
|
}
|
|
3624
3631
|
|
|
3625
|
-
const ezUploadCss = ":host{--iu--height:42px;--iu--width:100%;--iu__icon--width:48px;--iu__container--background-color:var(--background--medium, #d2dce9);--iu__color--primary:var(--color--primary, #008561);--iu--padding--extra-small:var(--space--extra-small, 3px);--iu--padding--small:var(--space--small, 6px);--iu--padding--medium:var(--space--medium, 12px);--iu--padding--large:var(--space--large, 24px);--iu--border-radius:var(--border--radius-medium, 12px);--iu__border--color:var(--color-strokes, #DCE0E8);--iu__input--border:var(--border--medium, 2px solid);--iu--text-shadow:var(--text-shadow, 0 0 0 #353535, 0 0 1px transparent);--iu--text--primary:var(--text-primary, #626e82);--iu--font-size:var(--text--medium, 14px);--iu--font-family:var(--font-pattern, Arial);--iu--font-weight:var(--text-weight--large, 500);display:flex;flex-wrap:wrap;position:relative;font-family:var(--iu--font-family);font-size:var(--iu--font-size);width:var(--iu--width);font-weight:var(--iu--font-weight)}.iu{display:flex;flex-wrap:wrap;background-color:var(--iu__container--background-color);padding:var(--iu--padding--small);width:100%;border-radius:12px;box-sizing:border-box}.iu__container{width:100%;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;border:2px dashed var(--iu__border--color);border-radius:6px;box-sizing:border-box}.iu__footer{display:flex;flex-wrap:wrap;justify-content:flex-start;width:100%;padding:0 var(--iu--padding--medium) var(--iu--padding--medium) var(--iu--padding--medium);box-sizing:border-box}.iu__item{display:flex;width:100%;justify-content:flex-start;align-items:center;align-self:center;padding-bottom:var(--iu--padding--extra-small);box-sizing:border-box;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.iu__item-label{display:flex;max-width:80%;align-self:stretch;align-items:center}.file__name{font-weight:200}.box__content{width:100%;justify-content:center;align-items:center;height:100%;border:1px dashed var(--iu__border--color);border-radius:6px;box-sizing:border-box}.box__container{display:flex;flex-wrap:wrap;background-color:var(--iu__container--background-color);padding:6px;width:100%;border-radius:12px}a:-webkit-any-link{color:#008561;fill:#008561;cursor:pointer;text-decoration:none}progress[value]{display:flex;width:100%;appearance:none;border:1px solid var(--iu__border--color);height:12px;justify-content:flex-start;align-items:center;border-radius:3px;position:relative}progress[value]::-webkit-progress-bar{display:flex;-webkit-appearance:none;width:100%;background-color:rgb(255, 255, 255);border-radius:2px;padding:2px}progress[value]::-webkit-progress-value{display:flex;width:100%;background-color:var(--iu__color--primary)}.text--center{text-align:center}.align--middle{align-self:center;align-items:center}.text{font-family:\"Sora\", \"Algerian\";text-shadow:0 0 0 #353535, 0 0 1px transparent}.text--primary{color:var(--iu--text--primary);text-shadow:var(--iu--text-shadow)}.text--ellipsis{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.text--medium{font-size:14px}.text--small{font-size:12px}.btn-cancel{outline:none;border:none;background-color:unset;cursor:pointer}.btn-cancel::after{content:'';display:flex;background-color:var(--text--primary, #008561);width:8px;height:8px;
|
|
3632
|
+
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:disabled{cursor:unset}.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__file-icon:disabled::after{background-color:var(--text--disable, #AFB6C0)}.iu__icon-label{justify-content:center;display:flex;cursor:pointer;padding:var(--iu--padding--large) 0px;box-sizing:border-box}.background--disabled{background-color:var(--color--disable-secondary, #F2F5F8)}.text--disabled{color:var(--text--disable, #AFB6C0)}.mouse-pointer--disabled{cursor:none}.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%}}";
|
|
3626
3633
|
|
|
3627
3634
|
let EzUpload = class {
|
|
3628
3635
|
constructor(hostRef) {
|
|
@@ -3634,7 +3641,7 @@ let EzUpload = class {
|
|
|
3634
3641
|
*/
|
|
3635
3642
|
this.enabled = true;
|
|
3636
3643
|
}
|
|
3637
|
-
|
|
3644
|
+
changeValue(newValue) {
|
|
3638
3645
|
if (newValue !== this._updatingValue) {
|
|
3639
3646
|
this._filePointers.forEach(f => {
|
|
3640
3647
|
if (this.isRemoteFile(f)) {
|
|
@@ -3642,12 +3649,15 @@ let EzUpload = class {
|
|
|
3642
3649
|
}
|
|
3643
3650
|
});
|
|
3644
3651
|
this._filePointers = new Map();
|
|
3645
|
-
|
|
3646
|
-
newValue.forEach(ezFile => this._filePointers.set(ezFile.name, ezFile));
|
|
3647
|
-
}
|
|
3652
|
+
this.updateFilePointers();
|
|
3648
3653
|
}
|
|
3649
3654
|
this._updatingValue = undefined;
|
|
3650
3655
|
}
|
|
3656
|
+
updateFilePointers() {
|
|
3657
|
+
if (this.value) {
|
|
3658
|
+
this.value.forEach(ezFile => this._filePointers.set(ezFile.name, ezFile));
|
|
3659
|
+
}
|
|
3660
|
+
}
|
|
3651
3661
|
normalizeRequestHeaders() {
|
|
3652
3662
|
this._requestHeaders = new Map();
|
|
3653
3663
|
if (typeof this.requestheaders == 'string') {
|
|
@@ -3782,8 +3792,18 @@ let EzUpload = class {
|
|
|
3782
3792
|
}
|
|
3783
3793
|
}
|
|
3784
3794
|
}
|
|
3795
|
+
openFilesDialog() {
|
|
3796
|
+
if (this.enabled) {
|
|
3797
|
+
if (this.maxfiles > 0 && this._filePointers.size >= this.maxfiles) {
|
|
3798
|
+
this.showError(`A quantidade máxima de arquivos é ${this.maxfiles}.`);
|
|
3799
|
+
}
|
|
3800
|
+
else {
|
|
3801
|
+
this._fileInput.click();
|
|
3802
|
+
}
|
|
3803
|
+
}
|
|
3804
|
+
}
|
|
3785
3805
|
componentDidLoad() {
|
|
3786
|
-
if (this._dropZone && window.FileList && window.File) {
|
|
3806
|
+
if (this.enabled && this._dropZone && window.FileList && window.File) {
|
|
3787
3807
|
this._dropZone.addEventListener('dragover', event => {
|
|
3788
3808
|
event.stopPropagation();
|
|
3789
3809
|
event.preventDefault();
|
|
@@ -3796,16 +3816,21 @@ let EzUpload = class {
|
|
|
3796
3816
|
});
|
|
3797
3817
|
}
|
|
3798
3818
|
}
|
|
3799
|
-
|
|
3800
|
-
if (this.
|
|
3801
|
-
this.
|
|
3802
|
-
|
|
3803
|
-
|
|
3804
|
-
this._fileInput.click();
|
|
3819
|
+
componentWillRender() {
|
|
3820
|
+
if (this.value) {
|
|
3821
|
+
if (this._filePointers.size < this.value.length) {
|
|
3822
|
+
this.updateFilePointers();
|
|
3823
|
+
}
|
|
3805
3824
|
}
|
|
3806
3825
|
}
|
|
3826
|
+
/*
|
|
3827
|
+
background--disabled
|
|
3828
|
+
text--disabled
|
|
3829
|
+
fill--disabled
|
|
3830
|
+
mouse-poiter--disabled
|
|
3831
|
+
*/
|
|
3807
3832
|
render() {
|
|
3808
|
-
return (index.h("div", { ref: (el) => this._dropZone = el, class:
|
|
3833
|
+
return (index.h("div", { ref: (el) => this._dropZone = el, class: this.evalDisabledClass('iu', 'background--disabled') }, this.label ? index.h("label", { class: this.evalDisabledClass('iu__label', 'text--disabled'), title: this.label }, this.label) : null, index.h("div", { class: "iu__container", onClick: () => this.openFilesDialog() }, index.h("div", { class: this.evalDisabledClass('iu__icon-label', 'mouse-pointer--disabled') }, index.h("button", { class: "iu__file-icon", disabled: !this.enabled }), index.h("div", { class: this.evalDisabledClass('text text--center text--medium text--primary', 'text--disabled') }, this.enabled ? 'Arraste e solte ou clique para adicionar arquivos' : 'Somente leitura')), this.buildFooter()), index.h("input", { ref: (el) => this._fileInput = el, onChange: (ev) => this.onFileInputChange(ev), type: "file", multiple: true, hidden: true })));
|
|
3809
3834
|
}
|
|
3810
3835
|
buildFooter() {
|
|
3811
3836
|
if (this._filePointers.size === 0) {
|
|
@@ -3824,11 +3849,18 @@ let EzUpload = class {
|
|
|
3824
3849
|
?
|
|
3825
3850
|
null
|
|
3826
3851
|
:
|
|
3827
|
-
index.h("div", { class: "col col--sd-4 col--stretch align--middle" }, index.h("progress", { id: this.buildProgressId(item), value: progress, max: "100" })),
|
|
3852
|
+
index.h("div", { class: "col col--sd-4 col--stretch align--middle" }, index.h("progress", { id: this.buildProgressId(item), value: progress, max: "100" })), this.enabled
|
|
3853
|
+
?
|
|
3854
|
+
index.h("div", { class: "col col--stretch align--middle" }, index.h("button", { class: "btn-cancel ", onClick: () => this.removeFile(fileName) }))
|
|
3855
|
+
:
|
|
3856
|
+
null));
|
|
3857
|
+
}
|
|
3858
|
+
evalDisabledClass(regularClasses, disabledClass) {
|
|
3859
|
+
return this.enabled ? regularClasses : `${regularClasses} ${disabledClass}`;
|
|
3828
3860
|
}
|
|
3829
3861
|
get _host() { return index.getElement(this); }
|
|
3830
3862
|
static get watchers() { return {
|
|
3831
|
-
"value": ["
|
|
3863
|
+
"value": ["changeValue"],
|
|
3832
3864
|
"requestheaders": ["normalizeRequestHeaders"]
|
|
3833
3865
|
}; }
|
|
3834
3866
|
};
|
|
@@ -68,7 +68,7 @@ export const Field = ({ dataUnit, field, forceScroll, enabled }) => {
|
|
|
68
68
|
const strHeaders = getProp(properties, 'HEADERS');
|
|
69
69
|
const headers = strHeaders ? JSON.parse(strHeaders) : {};
|
|
70
70
|
const maxfiles = Number(getProp(properties, "maxfiles") || 0);
|
|
71
|
-
return (h("div", { class: "col col--sd-12 padding--small" },
|
|
71
|
+
return (h("div", { class: "col col--sd-12 padding--small" }, loadingData ? h("place-holder", null) :
|
|
72
72
|
h("ez-upload", { value: value, label: formattedLabel, enabled: isEnabled, onEzChange: (event) => changeFieldHandler(event.detail), urlupload: target, requestheaders: headers, maxfiles: maxfiles })));
|
|
73
73
|
case 'DATE':
|
|
74
74
|
return h("div", { class: "col col--sd-12 col--tb-3 padding--small" }, loadingData ? h("place-holder", null) :
|
|
@@ -1,12 +1,19 @@
|
|
|
1
|
-
import { Component, h, Prop } from '@stencil/core';
|
|
1
|
+
import { Component, h, Host, Prop } from '@stencil/core';
|
|
2
2
|
export class EzIcon {
|
|
3
3
|
constructor() {
|
|
4
4
|
/*Tamanho do icone*/
|
|
5
5
|
this.size = 'medium';
|
|
6
6
|
}
|
|
7
|
+
isSprite() {
|
|
8
|
+
return this.href && this.href.indexOf('#') > -1;
|
|
9
|
+
}
|
|
7
10
|
render() {
|
|
8
|
-
return (h(
|
|
9
|
-
|
|
11
|
+
return (h(Host, null, this.isSprite()
|
|
12
|
+
?
|
|
13
|
+
h("svg", { class: this.size, role: "img" },
|
|
14
|
+
h("use", { xlinkHref: this.href }))
|
|
15
|
+
:
|
|
16
|
+
h("img", { class: this.size, src: this.href })));
|
|
10
17
|
}
|
|
11
18
|
static get is() { return "ez-icon"; }
|
|
12
19
|
static get encapsulation() { return "shadow"; }
|
|
@@ -29,6 +29,9 @@
|
|
|
29
29
|
--iu--font-family: var(--font-pattern, Arial);
|
|
30
30
|
--iu--font-weight: var(--text-weight--large, 500);
|
|
31
31
|
|
|
32
|
+
--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>');
|
|
33
|
+
--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>');
|
|
34
|
+
|
|
32
35
|
/*private*/
|
|
33
36
|
display: flex;
|
|
34
37
|
flex-wrap: wrap;
|
|
@@ -196,7 +199,8 @@ progress[value]::-webkit-progress-value {
|
|
|
196
199
|
background-color: var(--text--primary, #008561);
|
|
197
200
|
width: 8px;
|
|
198
201
|
height: 8px;
|
|
199
|
-
|
|
202
|
+
-webkit-mask-image: var(--iu__btn-cancel-image);
|
|
203
|
+
mask-image: var(--iu__btn-cancel-image);
|
|
200
204
|
}
|
|
201
205
|
|
|
202
206
|
.iu__label{
|
|
@@ -221,6 +225,9 @@ progress[value]::-webkit-progress-value {
|
|
|
221
225
|
background-color: unset;
|
|
222
226
|
cursor: pointer;
|
|
223
227
|
}
|
|
228
|
+
.iu__file-icon:disabled {
|
|
229
|
+
cursor: unset;
|
|
230
|
+
}
|
|
224
231
|
|
|
225
232
|
.iu__file-icon::after {
|
|
226
233
|
content: '';
|
|
@@ -228,7 +235,11 @@ progress[value]::-webkit-progress-value {
|
|
|
228
235
|
background-color: var(--text--primary, #626e82);
|
|
229
236
|
width: 9px;
|
|
230
237
|
height: 11px;
|
|
231
|
-
|
|
238
|
+
-webkit-mask-image: var(--iu__file-icon-image);
|
|
239
|
+
mask-image: var(--iu__file-icon-image);
|
|
240
|
+
}
|
|
241
|
+
.iu__file-icon:disabled::after {
|
|
242
|
+
background-color: var(--text--disable, #AFB6C0);
|
|
232
243
|
}
|
|
233
244
|
|
|
234
245
|
.iu__icon-label {
|
|
@@ -239,6 +250,19 @@ progress[value]::-webkit-progress-value {
|
|
|
239
250
|
box-sizing: border-box;
|
|
240
251
|
}
|
|
241
252
|
|
|
253
|
+
.background--disabled {
|
|
254
|
+
background-color: var(--color--disable-secondary, #F2F5F8);
|
|
255
|
+
}
|
|
256
|
+
|
|
257
|
+
.text--disabled{
|
|
258
|
+
color: var(--text--disable, #AFB6C0);
|
|
259
|
+
}
|
|
260
|
+
|
|
261
|
+
.mouse-pointer--disabled{
|
|
262
|
+
cursor: none;
|
|
263
|
+
}
|
|
264
|
+
|
|
265
|
+
|
|
242
266
|
/* //////// GRID SYSTEM //////// */
|
|
243
267
|
|
|
244
268
|
.row {
|
|
@@ -9,7 +9,7 @@ export class EzUpload {
|
|
|
9
9
|
*/
|
|
10
10
|
this.enabled = true;
|
|
11
11
|
}
|
|
12
|
-
|
|
12
|
+
changeValue(newValue) {
|
|
13
13
|
if (newValue !== this._updatingValue) {
|
|
14
14
|
this._filePointers.forEach(f => {
|
|
15
15
|
if (this.isRemoteFile(f)) {
|
|
@@ -17,12 +17,15 @@ export class EzUpload {
|
|
|
17
17
|
}
|
|
18
18
|
});
|
|
19
19
|
this._filePointers = new Map();
|
|
20
|
-
|
|
21
|
-
newValue.forEach(ezFile => this._filePointers.set(ezFile.name, ezFile));
|
|
22
|
-
}
|
|
20
|
+
this.updateFilePointers();
|
|
23
21
|
}
|
|
24
22
|
this._updatingValue = undefined;
|
|
25
23
|
}
|
|
24
|
+
updateFilePointers() {
|
|
25
|
+
if (this.value) {
|
|
26
|
+
this.value.forEach(ezFile => this._filePointers.set(ezFile.name, ezFile));
|
|
27
|
+
}
|
|
28
|
+
}
|
|
26
29
|
normalizeRequestHeaders() {
|
|
27
30
|
this._requestHeaders = new Map();
|
|
28
31
|
if (typeof this.requestheaders == 'string') {
|
|
@@ -157,8 +160,18 @@ export class EzUpload {
|
|
|
157
160
|
}
|
|
158
161
|
}
|
|
159
162
|
}
|
|
163
|
+
openFilesDialog() {
|
|
164
|
+
if (this.enabled) {
|
|
165
|
+
if (this.maxfiles > 0 && this._filePointers.size >= this.maxfiles) {
|
|
166
|
+
this.showError(`A quantidade máxima de arquivos é ${this.maxfiles}.`);
|
|
167
|
+
}
|
|
168
|
+
else {
|
|
169
|
+
this._fileInput.click();
|
|
170
|
+
}
|
|
171
|
+
}
|
|
172
|
+
}
|
|
160
173
|
componentDidLoad() {
|
|
161
|
-
if (this._dropZone && window.FileList && window.File) {
|
|
174
|
+
if (this.enabled && this._dropZone && window.FileList && window.File) {
|
|
162
175
|
this._dropZone.addEventListener('dragover', event => {
|
|
163
176
|
event.stopPropagation();
|
|
164
177
|
event.preventDefault();
|
|
@@ -171,21 +184,26 @@ export class EzUpload {
|
|
|
171
184
|
});
|
|
172
185
|
}
|
|
173
186
|
}
|
|
174
|
-
|
|
175
|
-
if (this.
|
|
176
|
-
this.
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
this._fileInput.click();
|
|
187
|
+
componentWillRender() {
|
|
188
|
+
if (this.value) {
|
|
189
|
+
if (this._filePointers.size < this.value.length) {
|
|
190
|
+
this.updateFilePointers();
|
|
191
|
+
}
|
|
180
192
|
}
|
|
181
193
|
}
|
|
194
|
+
/*
|
|
195
|
+
background--disabled
|
|
196
|
+
text--disabled
|
|
197
|
+
fill--disabled
|
|
198
|
+
mouse-poiter--disabled
|
|
199
|
+
*/
|
|
182
200
|
render() {
|
|
183
|
-
return (h("div", { ref: (el) => this._dropZone = el, class:
|
|
184
|
-
this.label ? h("label", { class:
|
|
201
|
+
return (h("div", { ref: (el) => this._dropZone = el, class: this.evalDisabledClass('iu', 'background--disabled') },
|
|
202
|
+
this.label ? h("label", { class: this.evalDisabledClass('iu__label', 'text--disabled'), title: this.label }, this.label) : null,
|
|
185
203
|
h("div", { class: "iu__container", onClick: () => this.openFilesDialog() },
|
|
186
|
-
h("div", { class:
|
|
187
|
-
h("button", { class: "iu__file-icon" }),
|
|
188
|
-
h("div", { class:
|
|
204
|
+
h("div", { class: this.evalDisabledClass('iu__icon-label', 'mouse-pointer--disabled') },
|
|
205
|
+
h("button", { class: "iu__file-icon", disabled: !this.enabled }),
|
|
206
|
+
h("div", { class: this.evalDisabledClass('text text--center text--medium text--primary', 'text--disabled') }, this.enabled ? 'Arraste e solte ou clique para adicionar arquivos' : 'Somente leitura')),
|
|
189
207
|
this.buildFooter()),
|
|
190
208
|
h("input", { ref: (el) => this._fileInput = el, onChange: (ev) => this.onFileInputChange(ev), type: "file", multiple: true, hidden: true })));
|
|
191
209
|
}
|
|
@@ -211,8 +229,15 @@ export class EzUpload {
|
|
|
211
229
|
:
|
|
212
230
|
h("div", { class: "col col--sd-4 col--stretch align--middle" },
|
|
213
231
|
h("progress", { id: this.buildProgressId(item), value: progress, max: "100" })),
|
|
214
|
-
|
|
215
|
-
|
|
232
|
+
this.enabled
|
|
233
|
+
?
|
|
234
|
+
h("div", { class: "col col--stretch align--middle" },
|
|
235
|
+
h("button", { class: "btn-cancel ", onClick: () => this.removeFile(fileName) }))
|
|
236
|
+
:
|
|
237
|
+
null));
|
|
238
|
+
}
|
|
239
|
+
evalDisabledClass(regularClasses, disabledClass) {
|
|
240
|
+
return this.enabled ? regularClasses : `${regularClasses} ${disabledClass}`;
|
|
216
241
|
}
|
|
217
242
|
static get is() { return "ez-upload"; }
|
|
218
243
|
static get encapsulation() { return "shadow"; }
|
|
@@ -419,7 +444,7 @@ export class EzUpload {
|
|
|
419
444
|
static get elementRef() { return "_host"; }
|
|
420
445
|
static get watchers() { return [{
|
|
421
446
|
"propName": "value",
|
|
422
|
-
"methodName": "
|
|
447
|
+
"methodName": "changeValue"
|
|
423
448
|
}, {
|
|
424
449
|
"propName": "requestheaders",
|
|
425
450
|
"methodName": "normalizeRequestHeaders"
|
|
@@ -3336,7 +3336,7 @@ const Field = ({ dataUnit, field, forceScroll, enabled }) => {
|
|
|
3336
3336
|
const strHeaders = getProp(properties, 'HEADERS');
|
|
3337
3337
|
const headers = strHeaders ? JSON.parse(strHeaders) : {};
|
|
3338
3338
|
const maxfiles = Number(getProp(properties, "maxfiles") || 0);
|
|
3339
|
-
return (h("div", { class: "col col--sd-12 padding--small" },
|
|
3339
|
+
return (h("div", { class: "col col--sd-12 padding--small" }, loadingData ? h("place-holder", null) :
|
|
3340
3340
|
h("ez-upload", { value: value, label: formattedLabel, enabled: isEnabled, onEzChange: (event) => changeFieldHandler(event.detail), urlupload: target, requestheaders: headers, maxfiles: maxfiles })));
|
|
3341
3341
|
case 'DATE':
|
|
3342
3342
|
return h("div", { class: "col col--sd-12 col--tb-3 padding--small" }, loadingData ? h("place-holder", null) :
|
|
@@ -3679,8 +3679,15 @@ let EzIcon$1 = class extends HTMLElement {
|
|
|
3679
3679
|
/*Tamanho do icone*/
|
|
3680
3680
|
this.size = 'medium';
|
|
3681
3681
|
}
|
|
3682
|
+
isSprite() {
|
|
3683
|
+
return this.href && this.href.indexOf('#') > -1;
|
|
3684
|
+
}
|
|
3682
3685
|
render() {
|
|
3683
|
-
return (h(
|
|
3686
|
+
return (h(Host, null, this.isSprite()
|
|
3687
|
+
?
|
|
3688
|
+
h("svg", { class: this.size, role: "img" }, h("use", { xlinkHref: this.href }))
|
|
3689
|
+
:
|
|
3690
|
+
h("img", { class: this.size, src: this.href })));
|
|
3684
3691
|
}
|
|
3685
3692
|
static get style() { return ezIconCss; }
|
|
3686
3693
|
};
|
|
@@ -5214,7 +5221,7 @@ class RemoteFile {
|
|
|
5214
5221
|
}
|
|
5215
5222
|
}
|
|
5216
5223
|
|
|
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);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;
|
|
5224
|
+
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:disabled{cursor:unset}.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__file-icon:disabled::after{background-color:var(--text--disable, #AFB6C0)}.iu__icon-label{justify-content:center;display:flex;cursor:pointer;padding:var(--iu--padding--large) 0px;box-sizing:border-box}.background--disabled{background-color:var(--color--disable-secondary, #F2F5F8)}.text--disabled{color:var(--text--disable, #AFB6C0)}.mouse-pointer--disabled{cursor:none}.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%}}";
|
|
5218
5225
|
|
|
5219
5226
|
let EzUpload$1 = class extends HTMLElement {
|
|
5220
5227
|
constructor() {
|
|
@@ -5228,7 +5235,7 @@ let EzUpload$1 = class extends HTMLElement {
|
|
|
5228
5235
|
*/
|
|
5229
5236
|
this.enabled = true;
|
|
5230
5237
|
}
|
|
5231
|
-
|
|
5238
|
+
changeValue(newValue) {
|
|
5232
5239
|
if (newValue !== this._updatingValue) {
|
|
5233
5240
|
this._filePointers.forEach(f => {
|
|
5234
5241
|
if (this.isRemoteFile(f)) {
|
|
@@ -5236,12 +5243,15 @@ let EzUpload$1 = class extends HTMLElement {
|
|
|
5236
5243
|
}
|
|
5237
5244
|
});
|
|
5238
5245
|
this._filePointers = new Map();
|
|
5239
|
-
|
|
5240
|
-
newValue.forEach(ezFile => this._filePointers.set(ezFile.name, ezFile));
|
|
5241
|
-
}
|
|
5246
|
+
this.updateFilePointers();
|
|
5242
5247
|
}
|
|
5243
5248
|
this._updatingValue = undefined;
|
|
5244
5249
|
}
|
|
5250
|
+
updateFilePointers() {
|
|
5251
|
+
if (this.value) {
|
|
5252
|
+
this.value.forEach(ezFile => this._filePointers.set(ezFile.name, ezFile));
|
|
5253
|
+
}
|
|
5254
|
+
}
|
|
5245
5255
|
normalizeRequestHeaders() {
|
|
5246
5256
|
this._requestHeaders = new Map();
|
|
5247
5257
|
if (typeof this.requestheaders == 'string') {
|
|
@@ -5376,8 +5386,18 @@ let EzUpload$1 = class extends HTMLElement {
|
|
|
5376
5386
|
}
|
|
5377
5387
|
}
|
|
5378
5388
|
}
|
|
5389
|
+
openFilesDialog() {
|
|
5390
|
+
if (this.enabled) {
|
|
5391
|
+
if (this.maxfiles > 0 && this._filePointers.size >= this.maxfiles) {
|
|
5392
|
+
this.showError(`A quantidade máxima de arquivos é ${this.maxfiles}.`);
|
|
5393
|
+
}
|
|
5394
|
+
else {
|
|
5395
|
+
this._fileInput.click();
|
|
5396
|
+
}
|
|
5397
|
+
}
|
|
5398
|
+
}
|
|
5379
5399
|
componentDidLoad() {
|
|
5380
|
-
if (this._dropZone && window.FileList && window.File) {
|
|
5400
|
+
if (this.enabled && this._dropZone && window.FileList && window.File) {
|
|
5381
5401
|
this._dropZone.addEventListener('dragover', event => {
|
|
5382
5402
|
event.stopPropagation();
|
|
5383
5403
|
event.preventDefault();
|
|
@@ -5390,16 +5410,21 @@ let EzUpload$1 = class extends HTMLElement {
|
|
|
5390
5410
|
});
|
|
5391
5411
|
}
|
|
5392
5412
|
}
|
|
5393
|
-
|
|
5394
|
-
if (this.
|
|
5395
|
-
this.
|
|
5396
|
-
|
|
5397
|
-
|
|
5398
|
-
this._fileInput.click();
|
|
5413
|
+
componentWillRender() {
|
|
5414
|
+
if (this.value) {
|
|
5415
|
+
if (this._filePointers.size < this.value.length) {
|
|
5416
|
+
this.updateFilePointers();
|
|
5417
|
+
}
|
|
5399
5418
|
}
|
|
5400
5419
|
}
|
|
5420
|
+
/*
|
|
5421
|
+
background--disabled
|
|
5422
|
+
text--disabled
|
|
5423
|
+
fill--disabled
|
|
5424
|
+
mouse-poiter--disabled
|
|
5425
|
+
*/
|
|
5401
5426
|
render() {
|
|
5402
|
-
return (h("div", { ref: (el) => this._dropZone = el, class:
|
|
5427
|
+
return (h("div", { ref: (el) => this._dropZone = el, class: this.evalDisabledClass('iu', 'background--disabled') }, this.label ? h("label", { class: this.evalDisabledClass('iu__label', 'text--disabled'), title: this.label }, this.label) : null, h("div", { class: "iu__container", onClick: () => this.openFilesDialog() }, h("div", { class: this.evalDisabledClass('iu__icon-label', 'mouse-pointer--disabled') }, h("button", { class: "iu__file-icon", disabled: !this.enabled }), h("div", { class: this.evalDisabledClass('text text--center text--medium text--primary', 'text--disabled') }, this.enabled ? 'Arraste e solte ou clique para adicionar arquivos' : 'Somente leitura')), this.buildFooter()), h("input", { ref: (el) => this._fileInput = el, onChange: (ev) => this.onFileInputChange(ev), type: "file", multiple: true, hidden: true })));
|
|
5403
5428
|
}
|
|
5404
5429
|
buildFooter() {
|
|
5405
5430
|
if (this._filePointers.size === 0) {
|
|
@@ -5418,11 +5443,18 @@ let EzUpload$1 = class extends HTMLElement {
|
|
|
5418
5443
|
?
|
|
5419
5444
|
null
|
|
5420
5445
|
:
|
|
5421
|
-
h("div", { class: "col col--sd-4 col--stretch align--middle" }, h("progress", { id: this.buildProgressId(item), value: progress, max: "100" })),
|
|
5446
|
+
h("div", { class: "col col--sd-4 col--stretch align--middle" }, h("progress", { id: this.buildProgressId(item), value: progress, max: "100" })), this.enabled
|
|
5447
|
+
?
|
|
5448
|
+
h("div", { class: "col col--stretch align--middle" }, h("button", { class: "btn-cancel ", onClick: () => this.removeFile(fileName) }))
|
|
5449
|
+
:
|
|
5450
|
+
null));
|
|
5451
|
+
}
|
|
5452
|
+
evalDisabledClass(regularClasses, disabledClass) {
|
|
5453
|
+
return this.enabled ? regularClasses : `${regularClasses} ${disabledClass}`;
|
|
5422
5454
|
}
|
|
5423
5455
|
get _host() { return this; }
|
|
5424
5456
|
static get watchers() { return {
|
|
5425
|
-
"value": ["
|
|
5457
|
+
"value": ["changeValue"],
|
|
5426
5458
|
"requestheaders": ["normalizeRequestHeaders"]
|
|
5427
5459
|
}; }
|
|
5428
5460
|
static get style() { return ezUploadCss; }
|