vue-intergrall-plugins 0.0.8 → 0.0.9

package/dist/vue-intergrall-plugins.ssr.js

@@ -2087,7 +2087,7 @@ var TemplateSingle = __vue_component__$b;var setResizeListeners = function setRe
   inputTargets.forEach(function (target) {
     target.addEventListener("input", function () {
       var currentHeight = target.scrollHeight;
-      if (target.textLength == 0) currentHeight = 38;
+      if (target.textLength == 0) currentHeight = 30;
       target.style.height = "auto";
       target.style.height = "".concat(currentHeight, "px");
       var parentTargets = $el.querySelectorAll(parentClass);
@@ -8540,6 +8540,9 @@ var __vue_render__$4 = function __vue_render__() {
       }
     })], 1) : _vm._e()]), _vm._v(" "), _c('span', {
       staticClass: "delete-file",
+      attrs: {
+        "title": _vm.dictionary.msg_excluir_anexo
+      },
       on: {
         "click": function click($event) {
           return _vm.deleteSpecificFile(singleFile.name, index);
@@ -8558,8 +8561,8 @@ var __vue_staticRenderFns__$4 = [];
 
 var __vue_inject_styles__$4 = function __vue_inject_styles__(inject) {
   if (!inject) return;
-  inject("data-v-53d19bab_0", {
-    source: ".multiple-file-preview{position:relative;display:flex;flex-direction:column;width:100%;height:100%;max-height:100%;overflow-y:auto;overflow-x:hidden;border-top-left-radius:5px;border-top-right-radius:5px;transition:background-color 150ms}.file-preview{display:flex;width:100%;align-items:center;padding:5px 10px;transition:background-color 150ms}.file-preview:hover{background-color:rgba(0,0,0,.1)}.file-title{color:#222;display:flex;align-items:center;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;padding:4px 10px;background-color:rgba(255,255,255,.8);border-radius:30px}.file-title.red{color:#e74c3c;margin-left:5px}.file-title>svg{margin-right:5px}.small-img{flex:1;margin:0 15px;display:flex;justify-content:center;align-items:center;position:relative}.small-img img{height:40px;cursor:pointer}.small-img .pdf{display:flex;justify-content:center;align-items:center;font-size:30px;color:#e74c3c}.small-img .pdf svg{z-index:1}.small-img .pdf::after{content:\"\";position:absolute;bottom:2px;transform:translateY(2px);width:20px;height:20px;background-color:#fff}.img-container{padding:5px;border-radius:2.5px;background-color:rgba(0,0,0,.15);display:flex;justify-content:center;align-items:center}.delete-file{display:flex;justify-content:center;align-items:center;border-radius:50%;background-color:#fff;min-width:1rem;min-height:1rem;cursor:pointer}.delete-file>svg{font-size:1rem;color:#e74c3c}",
+  inject("data-v-1ab24e70_0", {
+    source: ".multiple-file-preview{position:relative;display:flex;flex-direction:column;width:100%;height:100%;max-height:100%;overflow-y:auto;overflow-x:hidden;border-top-left-radius:2.5px;border-top-right-radius:2.5px;transition:background-color 150ms}.file-preview{display:flex;width:100%;align-items:center;padding:5px 10px;transition:background-color 150ms}.file-preview:hover{background-color:rgba(0,0,0,.1)}.file-title{color:#222;display:flex;align-items:center;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;padding:4px 10px;background-color:rgba(255,255,255,.8);border-radius:30px}.file-title.red{color:#e74c3c;margin-left:5px}.file-title>svg{margin-right:5px}.small-img{flex:1;margin:0 15px;display:flex;justify-content:center;align-items:center;position:relative}.small-img img{height:40px;cursor:pointer}.small-img .pdf{display:flex;justify-content:center;align-items:center;font-size:30px;color:#e74c3c}.small-img .pdf svg{z-index:1}.small-img .pdf::after{content:\"\";position:absolute;bottom:2px;transform:translateY(2px);width:20px;height:20px;background-color:#fff}.img-container{padding:5px;border-radius:2.5px;background-color:rgba(0,0,0,.15);display:flex;justify-content:center;align-items:center}.delete-file{display:flex;justify-content:center;align-items:center;border-radius:50%;background-color:#fff;min-width:1rem;min-height:1rem;cursor:pointer}.delete-file>svg{font-size:1rem;color:#e74c3c}",
     map: undefined,
     media: undefined
   });
@@ -8570,7 +8573,7 @@ var __vue_inject_styles__$4 = function __vue_inject_styles__(inject) {
 var __vue_scope_id__$4 = undefined;
 /* module identifier */
 
-var __vue_module_identifier__$4 = "data-v-53d19bab";
+var __vue_module_identifier__$4 = "data-v-1ab24e70";
 /* functional template */
 
 var __vue_is_functional_template__$4 = false;
@@ -8655,15 +8658,9 @@ var script$3 = {
     fileUpload: function fileUpload(event, type, externalCall) {
       try {
         this.openFiles = false;
-        if (this.showFilePreview) this.deleteFile();
-        this.file = !externalCall ? event.target.files ? event.target.files : event.dataTransfer.files : event;
-
-        if (!this.file.length) {
-          this.file = [];
-          return;
-        }
-
-        this.showFilePreview = true;
+        var filesAux = !externalCall ? event.target.files ? event.target.files : event.dataTransfer.files : event;
+        this.file = filesAux.length ? filesAux : this.file;
+        if (!this.file.length) return;
 
         if (!this.fileSettings.multiple) {
           this.file = this.file[0];
@@ -8745,6 +8742,9 @@ var script$3 = {
 
       if (this.isDoc) this.emitFileVars();
     },
+    toggleFilePreview: function toggleFilePreview() {
+      this.showFilePreview = !this.showFilePreview;
+    },
     emitFileVars: function emitFileVars() {
       var vars = {
         file: this.file,
@@ -8796,19 +8796,35 @@ var __vue_render__$3 = function __vue_render__() {
   return _c('span', {
     staticClass: "text-footer-actions--btn",
     class: {
-      'files-activated': _vm.openFiles
+      'files-activated': _vm.openFiles || _vm.file.length
     },
+    on: {
+      "click": function click($event) {
+        _vm.fileSettings.multiple ? _vm.openSelectFileHandler('both') : _vm.toggleFiles;
+      }
+    }
+  }, [_c('transition', {
     attrs: {
-      "title": _vm.dictionary.title_selecionar_anexo
+      "name": "fade"
+    }
+  }, [_vm.file.length ? _c('span', {
+    staticClass: "files-counter",
+    attrs: {
+      "title": _vm.dictionary.msg_abrir_anexos
+    },
+    domProps: {
+      "textContent": _vm._s(_vm.file.length)
     },
     on: {
       "click": function click($event) {
-        _vm.fileSettings.multiple ? _vm.openSelectFileHandler('both') : _vm.toggleFiles;
+        $event.stopPropagation();
+        return _vm.toggleFilePreview.apply(null, arguments);
       }
     }
-  }, [_c('fa-icon', {
+  }) : _vm._e()]), _vm._ssrNode(" "), _c('fa-icon', {
     attrs: {
-      "icon": ['fas', 'paperclip']
+      "icon": ['fas', 'paperclip'],
+      "title": _vm.dictionary.title_selecionar_anexo
     }
   }), _vm._ssrNode(" "), _c('transition', {
     attrs: {
@@ -8854,7 +8870,13 @@ var __vue_render__$3 = function __vue_render__() {
     attrs: {
       "name": "fade"
     }
-  }, [_vm.showFilePreview ? _c('div', {
+  }, [_c('div', {
+    directives: [{
+      name: "show",
+      rawName: "v-show",
+      value: _vm.showFilePreview,
+      expression: "showFilePreview"
+    }],
     staticClass: "text-footer-preview-container",
     class: [_vm.previewContainerClass],
     on: {
@@ -8887,7 +8909,7 @@ var __vue_render__$3 = function __vue_render__() {
       "delete-specific-file": _vm.deleteSpecificFile,
       "open-image": _vm.openImage
     }
-  })], 1) : _vm._e()])], 2);
+  })], 1)])], 2);
 };
 
 var __vue_staticRenderFns__$3 = [];
@@ -8895,8 +8917,8 @@ var __vue_staticRenderFns__$3 = [];
 
 var __vue_inject_styles__$3 = function __vue_inject_styles__(inject) {
   if (!inject) return;
-  inject("data-v-3d12f7cc_0", {
-    source: ".fade-enter-active,.fade-leave-active{transition:opacity .3s}.fade-enter,.fade-leave-to{opacity:0}",
+  inject("data-v-ba3fe4c6_0", {
+    source: ".fade-enter-active,.fade-leave-active{transition:opacity .3s}.fade-enter,.fade-leave-to{opacity:0}.files-counter{position:absolute;top:0;z-index:1;right:0;font-size:.5rem;width:15px;height:15px;border-radius:50%;background:#a4ac86;display:flex;justify-content:center;align-items:center;cursor:pointer;opacity:.9;transition:all .3s;color:#fff;font-weight:900}.files-counter:hover{opacity:1}",
     map: undefined,
     media: undefined
   });
@@ -8907,7 +8929,7 @@ var __vue_inject_styles__$3 = function __vue_inject_styles__(inject) {
 var __vue_scope_id__$3 = undefined;
 /* module identifier */
 
-var __vue_module_identifier__$3 = "data-v-3d12f7cc";
+var __vue_module_identifier__$3 = "data-v-ba3fe4c6";
 /* functional template */
 
 var __vue_is_functional_template__$3 = false;
@@ -9210,16 +9232,23 @@ var script$2 = {
 
       var fileType = this.returnFileType(files[0], true);
       var invalidFile = false;
-      files.forEach(function (file) {
-        var singleFileType = _this.returnFileType(file, true);
 
-        if (!singleFileType) {
-          invalidFile = true;
-          file.invalid = true;
-        }
+      try {
+        files.forEach(function (file) {
+          var singleFileType = _this.returnFileType(file, true);
 
-        file.imgOrDoc = singleFileType ? singleFileType : "";
-      });
+          if (!singleFileType) {
+            invalidFile = true;
+            file.invalid = true;
+          }
+
+          file.imgOrDoc = singleFileType ? singleFileType : "";
+        });
+      } catch (e) {
+        console.error("Erro ao tentar percorrer os arquivos");
+        console.error(e);
+        invalidFile = true;
+      }
 
       if (!invalidFile) {
         this.$refs["".concat(this.textId, "-file")].fileUpload(files, fileType, true);
@@ -9376,8 +9405,8 @@ var __vue_staticRenderFns__$2 = [];
 
 var __vue_inject_styles__$2 = function __vue_inject_styles__(inject) {
   if (!inject) return;
-  inject("data-v-4d58300c_0", {
-    source: ".toasted svg{margin-right:10px}.d-none{display:none}ul{list-style-type:none}.text-footer-container{display:flex;justify-content:center;align-items:center;flex-direction:column;width:100%;position:relative}.text-footer-container .text-footer{min-height:54px;position:relative;display:flex;justify-content:center;align-items:center;border:1px solid #ccc;padding:5px 2px 5px 5px;border-radius:15px}.text-footer-container .text-footer.full{width:100%}.text-footer-container .text-footer.almostFull{width:95%}.text-footer-container .text-footer.medium{width:75%}.text-footer-container textarea{margin:0 5px;border:unset;flex:1;resize:none;min-height:30px;max-height:60px;font-size:.875rem;font-family:inherit;background:inherit}.text-footer-container textarea:focus{outline:unset}.text-footer-container .text-footer-audio{flex:1;display:flex;justify-content:center;align-items:center}.text-footer-container audio{flex:1;outline:unset;width:auto;height:38px}.text-footer-container .delete-audio{display:flex;justify-content:center;align-items:center;color:#e74c3c;transition:background .3s;border-radius:50%;font-size:1rem;padding:10px;cursor:pointer;margin:0 5px;width:31px;height:31px}.text-footer-container .delete-audio:hover{background-color:rgba(208,0,0,.2)}.text-footer-container .max-characters{font-size:.575rem;z-index:1;color:#444;position:relative;top:30px;left:5px}.text-footer-container .max-characters.no-width{width:0}.text-footer-container .text-footer-actions{display:flex}.text-footer-container .text-footer-actions.outside-buttons{display:flex;align-items:center;justify-content:flex-end;position:absolute;top:-42px;right:2px;background-color:#ddd;box-shadow:inset 0 -10px 5px -11px rgba(0,0,0,.5)}.text-footer-container .text-footer-actions .text-footer-actions--btn{display:flex;justify-content:center;align-items:center;color:#777;border-radius:50%;transition:background .3s;padding:10px;font-size:1rem;width:36px;height:36px;cursor:pointer;margin-right:2.5px}.text-footer-container .text-footer-actions .text-footer-actions--btn:last-child{margin-right:unset}.text-footer-container .text-footer-actions .text-footer-actions--btn:hover{background-color:rgba(0,0,0,.1)}.text-footer-container .text-footer-actions .text-footer-actions--btn.files-activated{background-color:rgba(0,0,0,.1)}.text-footer-container .text-footer-actions .text-footer-actions--btn.audio-activated{background-color:rgba(208,0,0,.7);color:#fff}.text-footer-container .text-footer-actions .text-footer-actions--btn.left-button{position:absolute;left:0}.text-footer-container .text-footer-hsm-container{margin:12px 0 7px 0}.text-footer-container .text-footer-hsm-container.full{width:100%}.text-footer-container .text-footer-hsm-container.almostFull{width:95%}.text-footer-container .text-footer-hsm-container.medium{width:75%}.text-footer-container .text-footer-hsm-container .text-footer-v-select{border-radius:5px;margin-bottom:5px}.text-footer-container .text-footer-hsm-container .text-footer-select-03{display:flex;align-items:center;flex:1;width:100%}.text-footer-container .text-footer-hsm-container .text-footer-select-03 .text-footer-v-select{flex:1}.text-footer-container .text-footer-hsm-container .text-footer-select-03 .text-footer--btn-select-03{transition-duration:.3s;user-select:none;cursor:pointer;box-shadow:inset 0 -3px rgba(0,0,0,.2);opacity:.9;border-radius:2.5px;display:flex;justify-content:center;align-items:center;margin-left:5px;margin-bottom:5px;background-color:#f7fe72;width:32px;height:32px}.text-footer-container .text-footer-hsm-container .text-footer-select-03 .text-footer--btn-select-03:hover{opacity:1}.text-footer-container .text-footer-hsm-container .text-footer-select-03 .text-footer--btn-select-03:active{opacity:1;box-shadow:inset 0 -1px rgba(0,0,0,.2);-webkit-transform:translateY(1px);-moz-transform:translateY(1px);-o-transform:translateY(1px);-ms-transform:translateY(1px);transform:translateY(1px)}.text-footer-container .text-footer-hsm-container .text-footer-select-03 .text-footer--btn-select-03 svg{font-size:1rem}.text-footer-container .text-footer-files-container{position:absolute;right:0;top:-55px;padding:5px;background-color:rgba(0,0,0,.4);border-radius:5px;display:flex;align-items:center;justify-content:space-between;z-index:1}.text-footer-container .text-footer-files-container.horizontal{right:-55px;flex-direction:column}.text-footer-container .text-footer-files-container .files-btn{transition-duration:.3s;transition-property:opacity;opacity:.8;cursor:pointer;display:flex;justify-content:center;align-items:center;border-radius:10px;padding:3px;width:40px;height:40px;font-size:1rem;color:#fff}.text-footer-container .text-footer-files-container .files-btn:hover{opacity:1}.text-footer-container .text-footer-files-container .files-btn svg{color:#fff}.text-footer-container .text-footer-files-container .files-btn.images{background-color:#9575cd;margin-right:5px}.text-footer-container .text-footer-files-container .files-btn.images.margin-bottom{margin-right:unset;margin-bottom:5px}.text-footer-container .text-footer-files-container .files-btn.docs{background-color:#7986cb}.text-footer-container .text-footer-preview-container{cursor:default;position:absolute;left:0;background-color:#e1e1e1;border-top-left-radius:5px;border-top-right-radius:5px}.text-footer-container .text-footer-preview-container.isDoc{top:-50px;width:100%;height:45px}.text-footer-container .text-footer-preview-container.isImg,.text-footer-container .text-footer-preview-container.isMultiple{top:-205px;width:100%;height:200px}.text-footer-container .text-footer-preview-container.isImg .text-footer-image-preview{height:170px}.text-footer-container .text-footer-preview-container.isError{top:-80px;width:100%;height:75px}.text-footer-container .text-footer-preview-container .text-footer-exclude-file{position:absolute;top:5px;right:5px;cursor:pointer;display:flex;justify-content:center;align-items:center;min-width:1rem;min-height:1rem;background-color:#fff;border-radius:50%}.text-footer-container .text-footer-preview-container .text-footer-exclude-file svg{transition:color .2s;color:#e9594a}.text-footer-container .text-footer-preview-container .text-footer-exclude-file svg:hover{color:#e74c3c}.text-footer-container .text-footer-preview-container .text-footer-preview-title{font-size:1rem;padding:10px 0 0 10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.text-footer-container .text-footer-preview-container .text-footer-image-preview{display:flex;justify-content:center;align-items:center;width:100%}.text-footer-container .text-footer-preview-container .text-footer-image-preview img{cursor:pointer;max-width:98%;max-height:98%;padding:2%}.text-footer-container .text-footer-preview-container .text-footer-invalid-format{color:#222;padding:10px}.text-footer-container .text-footer-preview-container .text-footer-invalid-format h3{font-weight:500}.text-footer-container .text-footer-preview-container .text-footer-invalid-format h4{font-size:.9rem}.text-footer-container .text-footer-alt{margin-top:-12px;width:100%;padding:0 10px}.text-footer-container .text-footer-alt .text-footer-out-session{margin-top:12px}.text-footer-container .text-footer-alt .text-footer-sem-24h{font-size:.8rem;text-align:right;font-weight:600;letter-spacing:-.5px;color:#dd7f0c;margin-top:5px;position:absolute;right:0}.text-footer-container .text-footer-alt .sem-templates{margin-top:10px;font-size:.8rem;text-align:right;font-weight:600;letter-spacing:-.5px;color:#921e12}.text-footer-container .text-footer-alt .text-footer-templates{position:relative;width:100%}.text-footer-container .text-footer-alt .text-footer-templates .text-footer-group-selection{width:100%;display:flex;align-items:center}.text-footer-container .text-footer-alt .text-footer-templates .text-footer-group-selection h4{margin-right:5px}.text-footer-container .text-footer-alt .text-footer-templates .text-footer-group-selection .sm__select{flex:1}.vs__dropdown-menu{font-size:.85rem!important}.emoji-text-container{position:relative}.emoji-text-container .emoji-text-btn{font-size:1.2rem;cursor:pointer}.emoji-mart-anchor,.emoji-mart-emoji span{cursor:pointer!important}.emoji-mart{z-index:2!important}.emoji-mart-scroll{overflow-x:hidden}",
+  inject("data-v-e42cf7de_0", {
+    source: ".toasted svg{margin-right:10px}.d-none{display:none}ul{list-style-type:none}.text-footer-container{display:flex;justify-content:center;align-items:center;flex-direction:column;width:100%;position:relative}.text-footer-container .text-footer{min-height:48px;box-shadow:0 4px 5px -2px rgba(0,0,0,.25);position:relative;display:flex;justify-content:center;align-items:center;border:1px solid #ccc;padding:5px 2px 5px 5px;border-radius:5px}.text-footer-container .text-footer.full{width:100%}.text-footer-container .text-footer.almostFull{width:95%}.text-footer-container .text-footer.medium{width:75%}.text-footer-container textarea{margin:0 5px;border:unset;flex:1;resize:none;min-height:30px;max-height:60px;font-size:.875rem;font-family:inherit;background:inherit}.text-footer-container textarea:focus{outline:unset}.text-footer-container .text-footer-audio{flex:1;display:flex;justify-content:center;align-items:center}.text-footer-container audio{flex:1;outline:unset;width:auto;height:38px}.text-footer-container .delete-audio{display:flex;justify-content:center;align-items:center;color:#e74c3c;transition:background .3s;border-radius:50%;font-size:1rem;padding:10px;cursor:pointer;margin:0 5px;width:31px;height:31px}.text-footer-container .delete-audio:hover{background-color:rgba(208,0,0,.2)}.text-footer-container .max-characters{font-size:.575rem;z-index:1;color:#444;position:relative;top:30px;left:5px}.text-footer-container .max-characters.no-width{width:0}.text-footer-container .text-footer-actions{display:flex}.text-footer-container .text-footer-actions.outside-buttons{display:flex;align-items:center;justify-content:flex-end;position:absolute;top:-42px;right:2px;background-color:#ddd;box-shadow:inset 0 -10px 5px -11px rgba(0,0,0,.5)}.text-footer-container .text-footer-actions .text-footer-actions--btn{display:flex;justify-content:center;align-items:center;color:#777;border-radius:50%;transition:background .3s;padding:10px;font-size:1rem;width:36px;height:36px;cursor:pointer;margin-right:2.5px}.text-footer-container .text-footer-actions .text-footer-actions--btn:last-child{margin-right:unset}.text-footer-container .text-footer-actions .text-footer-actions--btn:hover{background-color:rgba(0,0,0,.1)}.text-footer-container .text-footer-actions .text-footer-actions--btn.files-activated{background-color:rgba(0,0,0,.1)}.text-footer-container .text-footer-actions .text-footer-actions--btn.audio-activated{background-color:rgba(208,0,0,.7);color:#fff}.text-footer-container .text-footer-actions .text-footer-actions--btn.left-button{position:absolute;left:0}.text-footer-container .text-footer-hsm-container{margin:12px 0 7px 0}.text-footer-container .text-footer-hsm-container.full{width:100%}.text-footer-container .text-footer-hsm-container.almostFull{width:95%}.text-footer-container .text-footer-hsm-container.medium{width:75%}.text-footer-container .text-footer-hsm-container .text-footer-v-select{border-radius:5px;margin-bottom:5px}.text-footer-container .text-footer-hsm-container .text-footer-select-03{display:flex;align-items:center;flex:1;width:100%}.text-footer-container .text-footer-hsm-container .text-footer-select-03 .text-footer-v-select{flex:1}.text-footer-container .text-footer-hsm-container .text-footer-select-03 .text-footer--btn-select-03{transition-duration:.3s;user-select:none;cursor:pointer;box-shadow:inset 0 -3px rgba(0,0,0,.2);opacity:.9;border-radius:2.5px;display:flex;justify-content:center;align-items:center;margin-left:5px;margin-bottom:5px;background-color:#f7fe72;width:32px;height:32px}.text-footer-container .text-footer-hsm-container .text-footer-select-03 .text-footer--btn-select-03:hover{opacity:1}.text-footer-container .text-footer-hsm-container .text-footer-select-03 .text-footer--btn-select-03:active{opacity:1;box-shadow:inset 0 -1px rgba(0,0,0,.2);-webkit-transform:translateY(1px);-moz-transform:translateY(1px);-o-transform:translateY(1px);-ms-transform:translateY(1px);transform:translateY(1px)}.text-footer-container .text-footer-hsm-container .text-footer-select-03 .text-footer--btn-select-03 svg{font-size:1rem}.text-footer-container .text-footer-files-container{position:absolute;right:0;top:-55px;padding:5px;background-color:rgba(0,0,0,.4);border-radius:5px;display:flex;align-items:center;justify-content:space-between;z-index:1}.text-footer-container .text-footer-files-container.horizontal{right:-55px;flex-direction:column}.text-footer-container .text-footer-files-container .files-btn{transition-duration:.3s;transition-property:opacity;opacity:.8;cursor:pointer;display:flex;justify-content:center;align-items:center;border-radius:10px;padding:3px;width:40px;height:40px;font-size:1rem;color:#fff}.text-footer-container .text-footer-files-container .files-btn:hover{opacity:1}.text-footer-container .text-footer-files-container .files-btn svg{color:#fff}.text-footer-container .text-footer-files-container .files-btn.images{background-color:#9575cd;margin-right:5px}.text-footer-container .text-footer-files-container .files-btn.images.margin-bottom{margin-right:unset;margin-bottom:5px}.text-footer-container .text-footer-files-container .files-btn.docs{background-color:#7986cb}.text-footer-container .text-footer-preview-container{cursor:default;position:absolute;left:0;background-color:#e1e1e1;border-top-left-radius:2.5px;border-top-right-radius:2.5px}.text-footer-container .text-footer-preview-container.isDoc{top:-50px;width:100%;height:45px}.text-footer-container .text-footer-preview-container.isImg,.text-footer-container .text-footer-preview-container.isMultiple{top:-205px;width:100%;height:200px}.text-footer-container .text-footer-preview-container.isImg .text-footer-image-preview{height:170px}.text-footer-container .text-footer-preview-container.isError{top:-80px;width:100%;height:75px}.text-footer-container .text-footer-preview-container .text-footer-exclude-file{position:absolute;top:5px;right:5px;cursor:pointer;display:flex;justify-content:center;align-items:center;min-width:1rem;min-height:1rem;background-color:#fff;border-radius:50%}.text-footer-container .text-footer-preview-container .text-footer-exclude-file svg{transition:color .2s;color:#e9594a}.text-footer-container .text-footer-preview-container .text-footer-exclude-file svg:hover{color:#e74c3c}.text-footer-container .text-footer-preview-container .text-footer-preview-title{font-size:1rem;padding:10px 0 0 10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.text-footer-container .text-footer-preview-container .text-footer-image-preview{display:flex;justify-content:center;align-items:center;width:100%}.text-footer-container .text-footer-preview-container .text-footer-image-preview img{cursor:pointer;max-width:98%;max-height:98%;padding:2%}.text-footer-container .text-footer-preview-container .text-footer-invalid-format{color:#222;padding:10px}.text-footer-container .text-footer-preview-container .text-footer-invalid-format h3{font-weight:500}.text-footer-container .text-footer-preview-container .text-footer-invalid-format h4{font-size:.9rem}.text-footer-container .text-footer-alt{margin-top:-12px;width:100%;padding:0 10px}.text-footer-container .text-footer-alt .text-footer-out-session{margin-top:12px}.text-footer-container .text-footer-alt .text-footer-sem-24h{font-size:.8rem;text-align:right;font-weight:600;letter-spacing:-.5px;color:#dd7f0c;margin-top:5px;position:absolute;right:0}.text-footer-container .text-footer-alt .sem-templates{margin-top:10px;font-size:.8rem;text-align:right;font-weight:600;letter-spacing:-.5px;color:#921e12}.text-footer-container .text-footer-alt .text-footer-templates{position:relative;width:100%}.text-footer-container .text-footer-alt .text-footer-templates .text-footer-group-selection{width:100%;display:flex;align-items:center}.text-footer-container .text-footer-alt .text-footer-templates .text-footer-group-selection h4{margin-right:5px}.text-footer-container .text-footer-alt .text-footer-templates .text-footer-group-selection .sm__select{flex:1}.vs__dropdown-menu{font-size:.85rem!important}.emoji-text-container{position:relative}.emoji-text-container .emoji-text-btn{font-size:1.2rem;cursor:pointer}.emoji-mart-anchor,.emoji-mart-emoji span{cursor:pointer!important}.emoji-mart{z-index:2!important}.emoji-mart-scroll{overflow-x:hidden}",
     map: undefined,
     media: undefined
   });
@@ -9388,7 +9417,7 @@ var __vue_inject_styles__$2 = function __vue_inject_styles__(inject) {
 var __vue_scope_id__$2 = undefined;
 /* module identifier */
 
-var __vue_module_identifier__$2 = "data-v-4d58300c";
+var __vue_module_identifier__$2 = "data-v-e42cf7de";
 /* functional template */
 
 var __vue_is_functional_template__$2 = false;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-intergrall-plugins",
-  "version": "0.0.8",
+  "version": "0.0.9",
   "description": "",
   "main": "dist/vue-intergrall-plugins.ssr.js",
   "browser": "dist/vue-intergrall-plugins.esm.js",

package/src/lib-components/Chat/BtnFiles.vue

@@ -1,6 +1,9 @@
 <template>
-  <span class="text-footer-actions--btn" :class="{'files-activated' : openFiles}" :title="dictionary.title_selecionar_anexo" @click="fileSettings.multiple ? openSelectFileHandler('both') : toggleFiles">
-    <fa-icon :icon="['fas', 'paperclip']" />
+  <span class="text-footer-actions--btn" :class="{'files-activated' : openFiles || file.length}" @click="fileSettings.multiple ? openSelectFileHandler('both') : toggleFiles">
+    <transition name="fade">
+      <span v-if="file.length" class="files-counter" v-text="file.length" @click.stop="toggleFilePreview" :title="dictionary.msg_abrir_anexos"></span>
+    </transition>
+    <fa-icon :icon="['fas', 'paperclip']" :title="dictionary.title_selecionar_anexo" />
     <transition name="show">
       <div v-if="openFiles" class="text-footer-files-container" :class="{'horizontal' : cssStyle.outsideButtons}">
         <div class="files-btn images" :class="{'margin-bottom' : cssStyle.outsideButtons}" :title="dictionary.title_anexo_img" @click="openSelectFileHandler('img')">
@@ -17,7 +20,7 @@
       <input v-if="!fileSettings.multiple" type="file" :id="`doc-${textId}`" accept="application/*" @change="fileUpload($event, 'doc')" />
     </div>
     <transition name="fade">
-      <div class="text-footer-preview-container" @click.stop v-if="showFilePreview" :class="[previewContainerClass]">
+      <div class="text-footer-preview-container" @click.stop v-show="showFilePreview" :class="[previewContainerClass]">
         <SingleFilePreview 
           v-if="!fileSettings.multiple"
           :dictionary="dictionary"
@@ -53,6 +56,29 @@
 .fade-leave-to {
   opacity: 0;
 }
+
+.files-counter {
+  position: absolute;
+  top: 0px;
+  z-index: 1;
+  right: 0px;
+  font-size: .5rem;
+  width: 15px;
+  height: 15px;
+  border-radius: 50%;
+  background: #a4ac86;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  cursor: pointer;
+  opacity: .9;
+  transition: all 300ms;
+  color: #FFF;
+  font-weight: 900;
+}
+.files-counter:hover {
+  opacity: 1
+}
 </style>
 
 <script>
@@ -126,15 +152,10 @@ export default {
     fileUpload(event, type, externalCall) {
       try {
         this.openFiles = false
-        if(this.showFilePreview) this.deleteFile()
-
-        this.file = !externalCall ? event.target.files ? event.target.files : event.dataTransfer.files : event
-        if(!this.file.length) {
-          this.file = []
-          return
-        }
+        let filesAux = !externalCall ? event.target.files ? event.target.files : event.dataTransfer.files : event
+        this.file = filesAux.length ? filesAux : this.file 
 
-        this.showFilePreview = true
+        if(!this.file.length) return
         if(!this.fileSettings.multiple) {
           this.file = this.file[0]
           this.singleFileUpload(type, this.file.name)
@@ -202,6 +223,9 @@ export default {
 
       if(this.isDoc) this.emitFileVars()
     },
+    toggleFilePreview() {
+      this.showFilePreview = !this.showFilePreview
+    },
     emitFileVars() {
       const vars = { file: this.file, isDoc: this.isDoc, showFilePreview: this.showFilePreview, imagePreview: this.imagePreview, fileFormatError: this.fileFormatError }
 

package/src/lib-components/Chat/MultipleFilePreview.vue

@@ -32,7 +32,7 @@
               <fa-icon :icon="['fas', 'file-pdf']" />
             </span>
           </div>
-          <span @click="deleteSpecificFile(singleFile.name, index)" class="delete-file">
+          <span @click="deleteSpecificFile(singleFile.name, index)" :title="dictionary.msg_excluir_anexo" class="delete-file">
             <fa-icon :icon="['fas', 'times-circle']" />
           </span>
         </div>
@@ -105,8 +105,8 @@ export default {
     max-height: 100%;
     overflow-y: auto;
     overflow-x: hidden;
-    border-top-left-radius: 5px;
-    border-top-right-radius: 5px;
+    border-top-left-radius: 2.5px;
+    border-top-right-radius: 2.5px;
     transition: background-color 150ms;
   }
 

package/src/lib-components/Chat/TextFooter.vue

@@ -315,14 +315,20 @@ export default {
     filesHandler(files) {
       const fileType = this.returnFileType(files[0], true)
       let invalidFile = false
-      files.forEach(file => {
-        const singleFileType = this.returnFileType(file, true)
-        if(!singleFileType) {
-          invalidFile = true
-          file.invalid = true
-        }
-        file.imgOrDoc = singleFileType ? singleFileType : ""
-      })
+      try {
+        files.forEach(file => {
+          const singleFileType = this.returnFileType(file, true)
+          if(!singleFileType) {
+            invalidFile = true
+            file.invalid = true
+          }
+          file.imgOrDoc = singleFileType ? singleFileType : ""
+        })
+      }catch(e) {
+        console.error("Erro ao tentar percorrer os arquivos")
+        console.error(e)
+        invalidFile = true
+      }
 
       if(!invalidFile) {
         this.$refs[`${this.textId}-file`].fileUpload(files, fileType, true)
@@ -389,14 +395,15 @@ ul {
   width: 100%;
   position: relative; }
   .text-footer-container .text-footer {
-    min-height: 54px;
+    min-height: 48px;
+    box-shadow: 0px 4px 5px -2px rgba(0, 0, 0, 0.25);
     position: relative;
     display: flex;
     justify-content: center;
     align-items: center;
     border: 1px solid #ccc;
     padding: 5px 2px 5px 5px;
-    border-radius: 15px; }
+    border-radius: 5px; }
     .text-footer-container .text-footer.full {
       width: 100%; }
     .text-footer-container .text-footer.almostFull {
@@ -575,8 +582,8 @@ ul {
     position: absolute;
     left: 0;
     background-color: rgb(225, 225, 225);
-    border-top-left-radius: 5px;
-    border-top-right-radius: 5px; }
+    border-top-left-radius: 2.5px;
+    border-top-right-radius: 2.5px; }
     .text-footer-container .text-footer-preview-container.isDoc {
       top: -50px;
       width: 100%;