vue-intergrall-plugins 0.0.263 → 0.0.265

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

@@ -1868,6 +1868,50 @@ var createPopper = /*#__PURE__*/popperGenerator({
 //
 //
 //
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
 var script$y = {
   data: function data() {
     return {
@@ -1875,7 +1919,9 @@ var script$y = {
       regexVars: /{{var_\d}}/g,
       lastVar: 0,
       htmlInputString: "<input type='text' class='input-var input-var-".concat(this.identifier, "' autocomplete='off' />"),
-      varListValues: ""
+      varListValues: "",
+      acceptedExtensions: "audio/aac, audio/mp4, audio/mpeg, audio/amr, audio/ogg, text/plain, application/pdf, application/vnd.ms-powerpoint, application/msword, application/vnd.ms-excel, application/vnd.openxmlformats-officedocument.wordprocessingml.document, application/vnd.openxmlformats-officedocument.presentationml.presentation, application/vnd.openxmlformats-officedocument.spreasheetml.sheet, image/jpeg, image/png, video/mp4, video/3gp, image/webp",
+      headerFiles: []
     };
   },
   props: {
@@ -1907,12 +1953,35 @@ var script$y = {
       required: true
     }
   },
+  computed: {
+    hasFooterComponent: function hasFooterComponent() {
+      if (!this.template.components || !this.template.components.length) return false;
+      var types = [];
+      this.template.components.forEach(function (_ref) {
+        var type = _ref.type;
+        return types.push(type);
+      });
+      if (types.includes('footer')) return true;
+      return false;
+    },
+    hasButtonOrFooterComponent: function hasButtonOrFooterComponent() {
+      if (!this.template.components || !this.template.components.length) return false;
+      var types = [];
+      this.template.components.forEach(function (_ref2) {
+        var type = _ref2.type;
+        return types.push(type);
+      });
+      if (types.includes('button')) return true;
+      return this.hasFooterComponent;
+    }
+  },
   created: function created() {
     this.$root.$refs["template-single-".concat(this.identifier)] = this;
   },
   mounted: function mounted() {
     if (this.allVariables) this.getListOpts();
     this.setInputs();
+    this.setImageVar(false);
   },
   updated: function updated() {
     this.lastVar = 0;
@@ -1941,42 +2010,161 @@ var script$y = {
           target: input
         }, input.id.replace(/[{}]+/g, ''));
       });
+      this.setImageVar(false);
     },
     getListOpts: function getListOpts() {
       this.varListValues = "<ul class=\"ts-dropdown\">\n        <li> nome </li>\n        ".concat(this.allVariables ? '<li> telefone </li>' : '', "\n      </ul>");
     },
-    setInputs: function setInputs() {
+    fileUpload: function fileUpload(event) {
       var _this2 = this;
 
+      try {
+        var allFiles = event.target.files ? event.target.files : event.dataTransfer.files ? event.dataTransfer.files : false;
+        if (!allFiles || !allFiles.length) return this.setImageVar(false);
+
+        if (allFiles.length > 1) {
+          this.$toasted.global.defaultInfo({
+            msg: "Limite de 1 arquivo por vez"
+          });
+          return this.setImageVar(false);
+        }
+
+        var file = allFiles[0];
+        var type = file.type,
+            name = file.name;
+        var validTypes = ['audio/aac', 'audio/mp4', 'audio/mpeg', 'audio/amr', 'audio/ogg', 'text/plain', 'application/pdf', 'application/vnd.ms-powerpoint', 'application/msword', 'application/vnd.ms-excel', 'application/vnd.openxmlformats-officedocument.wordprocessingml.document', 'application/vnd.openxmlformats-officedocument.presentationml.presentation', 'application/vnd.openxmlformats-officedocument.spreasheetml.sheet', 'image/jpeg', 'image/png', 'video/mp4', 'video/3gp', 'image/webp'];
+
+        if (!validTypes.includes(type)) {
+          this.$toasted.global.defaultInfo({
+            msg: "(".concat(type, ") ").concat(this.dictionary.msg_arquivo_invalido)
+          });
+          return this.setImageVar(false);
+        }
+
+        var returnArrType = function returnArrType(str) {
+          var arr = [];
+          validTypes.forEach(function (currentType) {
+            if (currentType.indexOf(str) > -1) arr.push(currentType);
+          });
+          return arr;
+        };
+
+        var imageTypes = returnArrType('image/');
+        var docTypes = returnArrType('application/');
+        var audioTypes = returnArrType('audio/');
+        var videoTypes = returnArrType('video/');
+        var isPdf = type.indexOf('application/pdf') > -1;
+        var sizeInBytes = 0;
+        Array.from(allFiles).forEach(function (file) {
+          return sizeInBytes += file.size;
+        });
+        var sizeInMb = parseFloat((sizeInBytes / (1024 * 1024)).toFixed(2));
+
+        if (sizeInMb == 0 && sizeInBytes == 0) {
+          this.$toasted.global.defaultInfo({
+            msg: this.dictionary.msg_arquivo_invalido
+          });
+          return this.setImageVar(false);
+        }
+
+        var max = imageTypes.includes(type) ? 5 : 15;
+
+        if (sizeInMb >= max) {
+          this.$toasted.global.defaultInfo({
+            msg: "Limite de ".concat(max, " MB por arquivo")
+          });
+          return this.setImageVar(false);
+        }
+
+        var fileReader = new FileReader();
+        var current_icon = 'file-alt',
+            current_color = 'blue',
+            setValues = true;
+
+        if (imageTypes.includes(type)) {
+          setValues = false;
+          fileReader.readAsDataURL(file);
+
+          fileReader.onload = function () {
+            var image_preview = fileReader.result;
+            _this2.headerFiles[0] = {
+              file: file,
+              image_preview: image_preview,
+              current_icon: current_icon,
+              current_color: current_color,
+              name: name
+            };
+
+            _this2.$forceUpdate();
+
+            _this2.setImageVar(file);
+          };
+        } else if (docTypes.includes(type) && isPdf) {
+          current_icon = 'file-pdf';
+          current_color = 'red';
+        } else if (audioTypes.includes(type)) {
+          current_icon = 'microphone';
+          current_color = 'black';
+        } else if (videoTypes.includes(type)) {
+          current_icon = 'video', current_color = 'black';
+        }
+
+        if (setValues) {
+          this.headerFiles[0] = {
+            file: file,
+            current_icon: current_icon,
+            current_color: current_color,
+            name: name
+          };
+          this.$forceUpdate();
+          this.setImageVar(file);
+        }
+      } catch (error) {
+        console.error("Erro file upload: ", error);
+      }
+    },
+    triggerInputFile: function triggerInputFile(origin) {
+      if (this.$refs["ts-input-".concat(origin)]) {
+        var elem = this.$refs["ts-input-".concat(origin)][0] ? this.$refs["ts-input-".concat(origin)][0] : this.$refs["ts-input-".concat(origin)];
+        elem && elem.click();
+      }
+    },
+    setInputs: function setInputs() {
+      var _this3 = this;
+
       var qtdInputs = 0;
       var header = document.querySelector("#template_header");
       var body = document.querySelector("#template_body");
       var footer = document.querySelector("#template_footer");
+      var hasText = false;
 
       if (header !== null) {
         header.querySelectorAll(".input-var-".concat(this.identifier)).forEach(function (input) {
-          _this2.setEvent(input);
+          _this3.setEvent(input);
         });
         qtdInputs += header.querySelectorAll(".input-var-".concat(this.identifier)).length;
+        if (qtdInputs > 0 && header.innerText) hasText = true;
       }
 
       if (this.lastVar === 0) this.lastVar += 1;
 
       if (body !== null) {
         body.querySelectorAll(".input-var-".concat(this.identifier)).forEach(function (input) {
-          _this2.setEvent(input);
+          _this3.setEvent(input);
         });
         qtdInputs += body.querySelectorAll(".input-var-".concat(this.identifier)).length;
+        if (qtdInputs > 0 && body.innerText) hasText = true;
       }
 
       if (footer !== null) {
         footer.querySelectorAll(".input-var-".concat(this.identifier)).forEach(function (input) {
-          _this2.setEvent(input);
+          _this3.setEvent(input);
         });
         qtdInputs += footer.querySelectorAll(".input-var-".concat(this.identifier)).length;
+        if (qtdInputs > 0 && footer.innerText) hasText = true;
       }
 
-      if (qtdInputs === 1) {
+      if (qtdInputs === 1 && !hasText) {
         document.querySelector(".input-var-".concat(this.identifier)).parentElement.style.width = "100%";
         document.querySelector(".input-var-".concat(this.identifier)).style.width = "100%";
       } else if (qtdInputs === 0) {
@@ -1984,14 +2172,14 @@ var script$y = {
       }
     },
     setEvent: function setEvent(input) {
-      var _this3 = this;
+      var _this4 = this;
 
       var varList = input.nextSibling;
       var currentInstance = this;
       input.setAttribute("placeholder", "{{var_".concat(this.lastVar, "}}"));
       input.setAttribute("id", "{{var_".concat(this.lastVar, "}}"));
       input.addEventListener("input", function (event) {
-        _this3.setVar(event, "var_".concat(_this3.lastVar), true);
+        _this4.setVar(event, "var_".concat(_this4.lastVar), true);
 
         if (varList) varList.classList.remove("visible");
       });
@@ -2014,7 +2202,7 @@ var script$y = {
                 });
               }
 
-              if (!stop && _this3.$refs["template-single-button"]) _this3.$refs["template-single-button"].focus();
+              if (!stop && _this4.$refs["template-single-button"]) _this4.$refs["template-single-button"].focus();
             };
 
             for (var i = 0; i < varList.children.length; i++) {
@@ -2040,7 +2228,7 @@ var script$y = {
       });
       input.addEventListener("blur", function () {
         if (input.value) {
-          if (_this3.isValid(input.value)) {
+          if (_this4.isValid(input.value)) {
             input.classList.add("active");
           } else {
             input.classList.add("invalid");
@@ -2053,7 +2241,7 @@ var script$y = {
         if (varList) varList.classList.remove("visible");
       });
       input.addEventListener("keydown", function (event) {
-        if (event.keyCode == 13 && _this3.hasButton) _this3.$emit("click-trigger");
+        if (event.keyCode == 13 && _this4.hasButton) _this4.$emit("click-trigger");
       });
       this.lastVar += 1;
     },
@@ -2085,6 +2273,18 @@ var script$y = {
 
       return isValueValid;
     },
+    setImageVar: function setImageVar(file) {
+      this.$emit("set-file-var", file);
+
+      if (!file) {
+        this.headerFiles = [];
+        return this.$forceUpdate();
+      } else {
+        if (this.lastVar == 0) return this.$emit("set-vars", this.template);
+        if (Object.keys(this.varValues).length) return this.$emit("set-vars", this.varValues);
+        this.handleInitialFocus();
+      }
+    },
     setVar: function setVar(event, key, notificar) {
       if (event && event.target) {
         key = event.target.id.replace(/[{}]+/g, '');
@@ -2189,17 +2389,74 @@ var __vue_render__$y = function __vue_render__() {
 
   return _c('div', {
     staticClass: "ts-container"
-  }, [_vm._ssrNode("<div class=\"ts-content\">" + _vm._ssrList(_vm.template.components, function (component, cIndex) {
-    return "<div>" + (component.type === 'header' ? "<header id=\"template_header\">" + _vm._ssrList(component.parameters, function (param, pIndex) {
-      return "<div>" + (param.type === 'text' ? _vm.regexVars.test(param.text) ? "<div>" + _vm._s(param.text.replace(_vm.regexVars, "<div class='ts-content__var'>" + _vm.htmlInputString + _vm.varListValues + "</div>")) + "</div>" : "<p>" + _vm._s(param.text) + "</p>" : "<!---->") + "</div>";
-    }) + "</header>" : "<!---->") + " " + (component.type === 'body' ? "<section id=\"template_body\"" + _vm._ssrClass(null, {
-      'margin-bottom': _vm.template.components.length === 2
-    }) + ">" + _vm._ssrList(component.parameters, function (param, pIndex) {
+  }, [_vm._ssrNode("<div class=\"ts-content\">", "</div>", _vm._l(_vm.template.components, function (component, cIndex) {
+    return _vm._ssrNode("<div" + _vm._ssrClass(null, "" + (component.type == 'footer' ? 'order-1 custom-box-shadow-bottom' : '') + (_vm.template.components.length == 1 ? 'custom-box-shadow-bottom' : '')) + ">", "</div>", [component.type === 'header' ? _vm._ssrNode("<header id=\"template_header\"" + _vm._ssrClass(null, "" + (_vm.template.components.length == 1 ? 'border-radius-5 custom-border-gray' : '')) + ">", "</header>", _vm._l(component.parameters, function (param, pIndex) {
+      return _vm._ssrNode("<div>", "</div>", [param.type === 'text' ? [_vm._ssrNode(_vm.regexVars.test(param.text) ? "<div>" + _vm._s(param.text.replace(_vm.regexVars, "<div class='ts-content__var'>" + _vm.htmlInputString + _vm.varListValues + "</div>")) + "</div>" : "<p>" + _vm._s(param.text) + "</p>")] : param.type == 'image' ? _vm._ssrNode("<div class=\"ts-image-type\">", "</div>", [_vm._ssrNode("<input type=\"file\"" + _vm._ssrAttr("accept", _vm.acceptedExtensions) + " class=\"d-none\"> "), _vm.headerFiles[0] ? [_vm.headerFiles[0].image_preview ? _c('img', {
+        directives: [{
+          name: "tippy",
+          rawName: "v-tippy",
+          value: {
+            placement: 'right'
+          },
+          expression: "{placement: 'right'}"
+        }],
+        attrs: {
+          "src": _vm.headerFiles[0].image_preview,
+          "alt": "Previa da imagem",
+          "content": _vm.headerFiles[0].name
+        },
+        on: {
+          "click": function click($event) {
+            return _vm.triggerInputFile("header-" + pIndex);
+          }
+        }
+      }) : _c('fa-icon', {
+        directives: [{
+          name: "tippy",
+          rawName: "v-tippy",
+          value: {
+            placement: 'right'
+          },
+          expression: "{placement: 'right'}"
+        }],
+        class: "color-" + _vm.headerFiles[0].current_color,
+        attrs: {
+          "icon": ['fas', _vm.headerFiles[0].current_icon],
+          "content": _vm.headerFiles[0].name
+        },
+        on: {
+          "click": function click($event) {
+            return _vm.triggerInputFile("header-" + pIndex);
+          }
+        }
+      })] : _c('fa-icon', {
+        directives: [{
+          name: "tippy",
+          rawName: "v-tippy",
+          value: {
+            placement: 'right'
+          },
+          expression: "{placement: 'right'}"
+        }],
+        staticClass: "select-image",
+        attrs: {
+          "icon": ['fas', 'image'],
+          "content": "Selecionar anexo"
+        },
+        on: {
+          "click": function click($event) {
+            return _vm.triggerInputFile("header-" + pIndex);
+          }
+        }
+      })], 2) : _vm._e()], 2);
+    }), 0) : _vm._e(), _vm._ssrNode(" " + (component.type === 'body' ? "<section id=\"template_body\"" + _vm._ssrClass(null, (_vm.template.components.length == 1 ? 'border-radius-5 custom-border-gray' : '') + " " + (!_vm.hasButtonOrFooterComponent ? 'custom-footer-style custom-box-shadow-bottom custom-border-gray' : '')) + ">" + _vm._ssrList(component.parameters, function (param, pIndex) {
       return "<div>" + (param.type === 'text' ? _vm.regexVars.test(param.text) ? "<div>" + _vm._s(param.text.replace(_vm.regexVars, "<div class='ts-content__var'>" + _vm.htmlInputString + _vm.varListValues + "</div>")) + "</div>" : "<p>" + _vm._s(param.text) + "</p>" : "<!---->") + "</div>";
-    }) + "</section>" : "<!---->") + " " + (component.type == 'footer' ? "<footer id=\"template_footer\">" + _vm._ssrList(component.parameters, function (param, pIndex) {
+    }) + "</section>" : "<!---->") + " " + (component.type == 'button' ? "<section id=\"template_buttons\"" + _vm._ssrClass(null, (_vm.template.components.length == 1 ? 'border-radius-5 custom-border-gray' : '') + " " + (!_vm.hasFooterComponent ? 'custom-footer-style custom-box-shadow-bottom' : '')) + ">" + _vm._ssrList(component.parameters, function (param, pIndex) {
+      return "<div class=\"ts-button\">" + (param.text ? "<p>" + _vm._s(param.text) + "</p>" : "<!---->") + "</div>";
+    }) + "</section>" : "<!---->") + " " + (component.type == 'footer' ? "<footer id=\"template_footer\"" + _vm._ssrClass(null, "" + (_vm.template.components.length == 1 ? 'border-radius-5 custom-border-gray' : '')) + ">" + _vm._ssrList(component.parameters, function (param, pIndex) {
       return "<div>" + (param.type == 'text' ? "<small>" + _vm._s(param.text) + "</small>" : "<!---->") + "</div>";
-    }) + "</footer>" : "<!---->") + "</div>";
-  }) + "</div> "), _vm.hasButton ? _vm._ssrNode("<div" + _vm._ssrClass("tg-btn", {
+    }) + "</footer>" : "<!---->"))], 2);
+  }), 0), _vm._ssrNode(" "), _vm.hasButton ? _vm._ssrNode("<div" + _vm._ssrClass("tg-btn", {
     'small-btn': _vm.iconButton
   }) + ">", "</div>", [_vm._ssrNode("<button>", "</button>", [!_vm.iconButton ? [_c('fa-icon', {
     attrs: {
@@ -2221,7 +2478,7 @@ var __vue_inject_styles__$y = undefined;
 var __vue_scope_id__$y = undefined;
 /* module identifier */
 
-var __vue_module_identifier__$y = "data-v-6048207e";
+var __vue_module_identifier__$y = "data-v-7cd51b67";
 /* functional template */
 
 var __vue_is_functional_template__$y = false;
@@ -9349,7 +9606,7 @@ var __vue_render__$i = function __vue_render__() {
   return _c('div', {
     staticClass: "ts-container"
   }, [_vm._ssrNode("<div class=\"ts-content\">", "</div>", [_vm._ssrNode("<section" + _vm._ssrClass(null, {
-    'tm-container': _vm.hasButton
+    'tm-container custom-box-shadow-bottom': _vm.hasButton
   }) + ">", "</section>", [_c('TextFooter', {
     ref: "text-footer-template-message",
     attrs: {
@@ -9382,7 +9639,7 @@ var __vue_inject_styles__$i = undefined;
 var __vue_scope_id__$i = undefined;
 /* module identifier */
 
-var __vue_module_identifier__$i = "data-v-6d6117ca";
+var __vue_module_identifier__$i = "data-v-5971fd9f";
 /* functional template */
 
 var __vue_is_functional_template__$i = false;
@@ -9452,7 +9709,8 @@ var script$h = {
     return {
       templateOptions: [],
       codTemplate: {},
-      selectedTemplate: null
+      selectedTemplate: null // hasFile: false
+
     };
   },
   mounted: function mounted() {
@@ -9519,7 +9777,8 @@ var script$h = {
         });
       } else {
         this.selectedTemplate = null;
-      }
+      } // if(this.hasFile) this.setFileVar(false)
+
 
       this.adjustOnSelect();
     },
@@ -9602,6 +9861,10 @@ var script$h = {
 
       this.$emit("template-data", this.selectedTemplate);
     },
+    setFileVar: function setFileVar(file) {
+      // this.hasFile = file ? true : false
+      this.$emit("set-file-var", file);
+    },
     setMessage: function setMessage(message) {
       this.$emit("static-message", message);
     }
@@ -9649,6 +9912,7 @@ var __vue_render__$h = function __vue_render__() {
     },
     slot: "no-options"
   })])], 2), _vm._ssrNode(" "), _vm.selectedTemplate ? [_vm.selectedTemplate.components ? _vm._ssrNode("<div class=\"tg-component\">", "</div>", [_c('TemplateSingle', {
+    key: _vm.codTemplate,
     attrs: {
       "template": _vm.selectedTemplate,
       "hasButton": _vm.hasButton,
@@ -9659,6 +9923,7 @@ var __vue_render__$h = function __vue_render__() {
     },
     on: {
       "set-vars": _vm.setFinalMessage,
+      "set-file-var": _vm.setFileVar,
       "click-trigger": function clickTrigger($event) {
         return _vm.$emit('click-trigger');
       }
@@ -9683,8 +9948,8 @@ var __vue_staticRenderFns__$h = [];
 
 var __vue_inject_styles__$h = function __vue_inject_styles__(inject) {
   if (!inject) return;
-  inject("data-v-37a18a28_0", {
-    source: "*{box-sizing:border-box}.toasted svg{margin-right:10px}.d-none{display:none}ul{list-style-type:none}h1,h2,h3,h4,p{margin:0;padding:0}.tg-container{width:100%;max-width:800px;display:flex;flex-direction:column;overflow-x:hidden;overflow-y:auto}.tg-options{width:100%;display:flex}.tg-options.column{flex-direction:column}.tg-options h4{margin-right:5px}.tg-select{flex:1;height:34px;overflow:hidden}.tg-select .vs__dropdown-toggle{background-color:#fff;height:34px;overflow:hidden;display:flex;align-items:center}.tg-select .vs__selected-options{height:34px;overflow:hidden}.tg-select .vs__selected-options>span{white-space:nowrap;text-overflow:ellipsis;flex:1}.tg-select .vs__selected-options>input{flex-grow:0}.vs__dropdown-option.vs__dropdown-option--selected{background-color:#1a5fad!important;color:#fff}.vs__dropdown-menu li{padding:10px 15px}.vs__dropdown-option{transition:background-color 150ms;white-space:normal}.vs__dropdown-option:nth-child(odd){background-color:#f1f1f1}.vs__dropdown-option--highlight,.vs__dropdown-option--selected,.vs__dropdown-option:active,.vs__dropdown-option:focus,.vs__dropdown-option:hover{background-color:#5897fb!important;color:#fff}.tg-component{width:100%}.ts-container{width:100%;display:flex;justify-content:space-between}.ts-content{--border-color:#CCC;--background-color:#DFF0D8;--input-background-color:#FFF;--input-border-default:#007BFF;--input-border-error:#E74C3C;--placeholder-color:#BBB;flex:2;font-size:.7rem;padding:10px 0}.ts-content footer,.ts-content header,.ts-content section{padding:3px 5px;background-color:var(--background-color)}.ts-content header,.ts-content section{border-right:1px solid var(--border-color);border-left:1px solid var(--border-color)}.ts-content header{border-top-left-radius:2.5px;border-top-right-radius:2.5px;border-top:1px solid var(--border-color)}.ts-content header{font-weight:550}.ts-content section{line-height:25px}.ts-content section.margin-bottom{border-bottom-left-radius:2.5px;border-bottom-right-radius:2.5px;border-bottom:1px solid var(--border-color)}.ts-content footer{border:1px solid var(--border-color);border-top:unset;border-bottom-left-radius:2.5px;border-bottom-right-radius:2.5px}.ts-content input{border:1px solid transparent;outline:0;font-size:.8rem;padding:2.5px 5px;background-color:var(--input-background-color)}.ts-content input::placeholder{color:var(--placeholder-color)}.ts-content input.active,.ts-content input:focus{border:1px solid var(--input-border-default)}.ts-content input.invalid{border:1px solid var(--input-border-error)!important}.ts-content__var{display:inline-block;position:relative}.ts-dropdown{margin:0;padding:0;position:absolute;top:19px;left:0;background:#eee;width:100%;z-index:1;transition:all 150ms;visibility:hidden;opacity:0;list-style-type:none;border:1px solid #444;border-top:unset}.ts-dropdown li{width:100%;opacity:.9;cursor:pointer;font-weight:550;padding:2px 3px;font-size:.8rem;transition:background-color 150ms}.ts-dropdown li:focus,.ts-dropdown li:focus-within,.ts-dropdown li:hover{opacity:1;background-color:#555;color:#fff}.ts-dropdown.visible{visibility:visible;opacity:1}.tg-btn{width:40%;display:flex;justify-content:center;align-items:center}.tg-btn button{border:unset;display:block;min-width:180px;height:35px;padding:0 10px;font-weight:500;background-color:#007bff;color:#fff;transition:transform .3s ease-in-out;user-select:none;cursor:pointer;box-shadow:inset 0 -2px rgba(0,0,0,.2);opacity:.9;border-radius:2.5px}.tg-btn button>svg{margin-right:5px;color:#003166}.tg-btn button:hover{opacity:1}.tg-btn button: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)}.tg-btn button: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)}.tg-btn button:active,.tg-btn button:focus{outline:2px solid #000}.tg-btn.small-btn{width:auto;margin:0 5px}.tg-btn.small-btn svg{margin-right:0}.tg-btn.small-btn button{min-width:35px;width:35px;padding:0;display:flex;justify-content:center;align-items:center}.tm-container{border:1px solid var(--border-color);border-radius:2.5px;display:flex}",
+  inject("data-v-2f61c38c_0", {
+    source: "*{box-sizing:border-box}.toasted svg{margin-right:10px}.d-none{display:none}ul{list-style-type:none}h1,h2,h3,h4,p{margin:0;padding:0}.tg-container{width:100%;max-width:800px;display:flex;flex-direction:column;overflow-x:hidden;overflow-y:auto}.tg-options{width:100%;display:flex}.tg-options.column{flex-direction:column}.tg-options h4{margin-right:5px}.ts-image-type{display:flex;align-items:center}.ts-image-type img{cursor:pointer}.ts-image-type svg{font-size:25px;cursor:pointer}.ts-image-type .select-image{color:#838383}.color-red{color:#e74c3c}.color-blue{color:#007bff}.color-black{color:#333}.ts-button{background-color:#fff;border-radius:10px;display:flex;justify-content:center;align-items:center;padding:3px 15px;transition:background-color 150ms ease-in-out}.ts-button:hover{background-color:#fdfdfd}.tg-select{flex:1;height:34px;overflow:hidden}.tg-select .vs__dropdown-toggle{background-color:#fff;height:34px;overflow:hidden;display:flex;align-items:center}.tg-select .vs__selected-options{height:34px;overflow:hidden}.tg-select .vs__selected-options>span{white-space:nowrap;text-overflow:ellipsis;flex:1}.vs__dropdown-option.vs__dropdown-option--selected{background-color:#1a5fad!important;color:#fff}.vs__dropdown-menu li{padding:10px 15px}.vs__dropdown-option{transition:background-color 150ms;white-space:normal}.vs__dropdown-option:nth-child(odd){background-color:#f1f1f1}.vs__dropdown-option--highlight,.vs__dropdown-option--selected,.vs__dropdown-option:active,.vs__dropdown-option:focus,.vs__dropdown-option:hover{background-color:#5897fb!important;color:#fff}.tg-component{width:100%}.ts-container{width:100%;display:flex;justify-content:space-between}.ts-content{--border-color:#CCC;--background-color:#DFF0D8;--input-background-color:#FFF;--input-border-default:#007BFF;--input-border-error:#E74C3C;--placeholder-color:#BBB;--border-radius:5px;flex:2;font-size:.7rem;padding:10px 0;display:flex;flex-direction:column}.order-1{order:1}.custom-box-shadow-bottom{box-shadow:0 3px 4px -3px rgba(0,0,0,.3)}.custom-border-gray{border:1px solid var(--border-color)!important}.ts-content footer,.ts-content header,.ts-content section{padding:3px 5px;background-color:var(--background-color)}.ts-content header,.ts-content section{border-right:1px solid var(--border-color);border-left:1px solid var(--border-color)}.ts-content header{border-top-left-radius:var(--border-radius);border-top-right-radius:var(--border-radius);border-top:1px solid var(--border-color)}.ts-content header{font-weight:550}.ts-content section{line-height:25px}.ts-content section.margin-bottom{border-bottom-left-radius:var(--border-radius);border-bottom-right-radius:var(--border-radius);border-bottom:1px solid var(--border-color)}.custom-footer-style,.ts-content footer{border:1px solid var(--border-color);border-top:unset;border-bottom-left-radius:var(--border-radius);border-bottom-right-radius:var(--border-radius)}.ts-content input{border:1px solid transparent;outline:0;font-size:.8rem;padding:2.5px 5px;background-color:var(--input-background-color)}.ts-content input::placeholder{color:var(--placeholder-color)}.ts-content input.active,.ts-content input:focus{border:1px solid var(--input-border-default)}.ts-content input.invalid{border:1px solid var(--input-border-error)!important}.ts-content__var{display:inline-block;position:relative}.ts-dropdown{margin:0;padding:0;position:absolute;top:19px;left:0;background:#eee;width:100%;z-index:1;transition:all 150ms;visibility:hidden;opacity:0;list-style-type:none;border:1px solid #444;border-top:unset}.ts-dropdown li{width:100%;opacity:.9;cursor:pointer;font-weight:550;padding:2px 3px;font-size:.8rem;transition:background-color 150ms}.ts-dropdown li:focus,.ts-dropdown li:focus-within,.ts-dropdown li:hover{opacity:1;background-color:#555;color:#fff}.ts-dropdown.visible{visibility:visible;opacity:1}.tg-btn{width:40%;display:flex;justify-content:center;align-items:center}.tg-btn button{border:unset;display:block;min-width:180px;height:35px;padding:0 10px;font-weight:500;background-color:#007bff;color:#fff;transition:transform .3s ease-in-out;user-select:none;cursor:pointer;box-shadow:inset 0 -2px rgba(0,0,0,.2);opacity:.9;border-radius:2.5px}.tg-btn button>svg{margin-right:5px;color:#003166}.tg-btn button:hover{opacity:1}.tg-btn button: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)}.tg-btn button: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)}.tg-btn button:active,.tg-btn button:focus{outline:2px solid #000}.tg-btn.small-btn{width:auto;margin:0 5px}.tg-btn.small-btn svg{margin-right:0}.tg-btn.small-btn button{min-width:35px;width:35px;padding:0;display:flex;justify-content:center;align-items:center}.tm-container{border:1px solid var(--border-color);border-radius:5px;display:flex}",
     map: undefined,
     media: undefined
   });
@@ -9695,7 +9960,7 @@ var __vue_inject_styles__$h = function __vue_inject_styles__(inject) {
 var __vue_scope_id__$h = undefined;
 /* module identifier */
 
-var __vue_module_identifier__$h = "data-v-37a18a28";
+var __vue_module_identifier__$h = "data-v-2f61c38c";
 /* functional template */
 
 var __vue_is_functional_template__$h = false;
@@ -11999,7 +12264,7 @@ var script$5 = {
     InteratividadeFormulario: InteratividadeFormulario,
     LinkPreview: LinkPreview
   },
-  props: ["smartchannel", "messageIndex", "dictionary", "autor", "origem", "msg", "link", "anexo", "imgAnexo", "tipoDoc", "docAnexo", "nomeArquivo", "audio", "video", "horario", "status", "logo", "msgTooltip", "seq", "mapa", "histMsg", "erro", "msgErro", "origemExterna", "anexos", "dominio", "corMsg", "interatividade", "msgReply", "hasReply", "iniDialogo", "dialogoId", "dialogoOrigem", "expSessao", "referenceSelector"],
+  props: ["smartchannel", "messageIndex", "dictionary", "autor", "origem", "msg", "link", "anexo", "imgAnexo", "tipoDoc", "docAnexo", "nomeArquivo", "audio", "video", "horario", "status", "logo", "msgTooltip", "seq", "mapa", "histMsg", "erro", "msgErro", "origemExterna", "anexos", "dominio", "corMsg", "interatividade", "msgReply", "hasReply", "iniDialogo", "dialogoId", "dialogoOrigem", "expSessao", "referenceSelector", "replyMessage", "isReply", "defaultReplyMessage", "showReplyIcon"],
   created: function created() {
     if (!this.$root.$refs.chatMessages) this.$root.$refs.chatMessages = this;
   },
@@ -12255,7 +12520,20 @@ var __vue_render__$5 = function __vue_render__() {
       'hist-msg': _vm.histMsg,
       'max-w-60': _vm.link && !_vm.mapa
     }
-  }, [_vm.anexos && _vm.anexos.length ? _vm._l(_vm.anexos, function (anexo, index) {
+  }, [_vm.isReply ? _c('div', {
+    staticClass: "mensagem-reply",
+    class: "message-reply-" + _vm.origem
+  }, [_vm.replyMessage ? _c('p', {
+    domProps: {
+      "innerHTML": _vm._s(_vm.replyMessage)
+    }
+  }) : _c('span', {
+    staticClass: "mensagem-reply-vazia"
+  }, [_vm.showReplyIcon ? _c('fa-icon', {
+    attrs: {
+      "icon": ['fas', 'times']
+    }
+  }) : _vm._e(), _vm._v("\n        " + _vm._s(_vm.defaultReplyMessage ? _vm.defaultReplyMessage : _vm.dictionary.mensagem_reply_padrao) + "\n      ")], 1)]) : _vm._e(), _vm._v(" "), _vm.anexos && _vm.anexos.length ? _vm._l(_vm.anexos, function (anexo, index) {
     return _c('div', {
       key: index,
       staticClass: "mensagem-anexo"
@@ -12515,8 +12793,8 @@ var __vue_staticRenderFns__$5 = [];
 
 var __vue_inject_styles__$5 = function __vue_inject_styles__(inject) {
   if (!inject) return;
-  inject("data-v-17719010_0", {
-    source: ":root{--message-color:#373737;--text-color:#FFF;--files-bg:rgba(255, 255, 255, 0.1);--files-bg-hover:rgba(255, 255, 255, 0.1);--light:80;--threshold:60}.fade-enter-active,.fade-leave-active{transition:opacity .5s}.fade-enter,.fade-leave-to{opacity:0}.mensagem{padding:14px 7px;border-radius:5px;min-width:150px;min-height:60px;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;position:relative;max-width:80%;margin-bottom:10px;font-size:.75rem;word-break:break-word;-webkit-box-shadow:0 3px 1px -2px rgba(0,0,0,.2),0 2px 2px 0 rgba(0,0,0,.14),0 1px 5px 0 rgba(0,0,0,.12);-moz-box-shadow:0 3px 1px -2px rgba(0,0,0,.2),0 2px 2px 0 rgba(0,0,0,.14),0 1px 5px 0 rgba(0,0,0,.12);box-shadow:0 3px 1px -2px rgba(0,0,0,.2),0 2px 2px 0 rgba(0,0,0,.14),0 1px 5px 0 rgba(0,0,0,.12)}.mensagem.max-w-60{max-width:60%}.mensagem.mapa{width:100%}.mensagem.hist-msg{animation:show 1s}.mensagem a{margin-right:5px;font-weight:550;color:inherit;text-decoration:none}.mensagem a:hover{text-decoration:underline}.message p{white-space:pre-wrap}.mensagem-anexo a,.mensagem-div-mapa a{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.reply{cursor:pointer;position:absolute;right:53px;bottom:5px;font-size:.6rem;color:#67a332;width:.9rem;height:.9rem;display:flex;justify-content:center;align-items:center;border-radius:50%;background-color:#fff}.reply svg{margin-top:-1px;margin-right:-1px}.reply-with-2-icons{right:30px}.check{cursor:pointer;position:absolute;right:10px;bottom:2px;font-size:.7rem}.check.visualizado,.check.visualizado svg{color:#006daa}.check.verde,.check.verde svg{color:#4f772d}.check.vermelho,.check.vermelho svg{color:#ba181b}.check.cinza,.check.cinza svg{color:#999}.check.preto,.check.preto svg{color:#666}.star{cursor:pointer;position:absolute;right:30px;bottom:2px;font-size:.4rem;width:11.2px}.default-stick-size{width:180px;height:auto}.horario-envio{margin-right:15px;font-size:.7rem;position:absolute;left:10px;bottom:2px}.autor-mensagem{position:absolute;font-size:.6rem;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;max-width:90%;font-weight:700;top:2px}.mensagem__principal{width:100%;display:flex;justify-content:flex-end}.mensagem__principal>.mensagem::after{content:\"\";width:0;height:0;position:absolute;border-left:10px solid transparent;border-right:10px solid transparent;border-top:10px solid var(--message-color);bottom:5px;right:-10px;transform:rotate(-90deg)}.mensagem__principal>.mensagem{background-color:var(--message-color);color:var(--text-color)}.mensagem__principal>.mensagem .horario-envio{color:var(--text-color)}.mensagem__principal>.mensagem .autor-mensagem{right:5px;color:var(--text-color)}.mensagem__outros{width:100%;display:flex}.mensagem__outros>.mensagem{background-color:#fff;color:#333}.mensagem__outros>.mensagem::after{content:\"\";width:0;height:0;position:absolute;border-left:10px solid transparent;border-right:10px solid transparent;border-top:10px solid #fff;bottom:5px;left:-10px;transform:rotate(90deg)}.mensagem__outros>.autor-mensagem{left:5px;color:#333}.mensagem-div-mapa{width:100%;display:flex;justify-content:center;align-items:center;flex-direction:column;margin-bottom:5px}.msg-mapa{width:100%;min-height:225px;height:100%;box-sizing:initial}.msg-mapa img{max-width:none!important}.info-mapa{list-style-type:none}.info-mapa li.title{font-size:.85em}.info-mapa li.address,.info-mapa li.url{font-size:.85em}.info-mapa li.url{font-size:.85em}.tooltip-list{margin:0;padding:0;display:flex;flex-direction:column;justify-content:center;align-items:flex-start}",
+  inject("data-v-79ea3333_0", {
+    source: ":root{--message-color:#373737;--text-color:#FFF;--files-bg:rgba(255, 255, 255, 0.1);--files-bg-hover:rgba(255, 255, 255, 0.1);--light:80;--threshold:60}.fade-enter-active,.fade-leave-active{transition:opacity .5s}.fade-enter,.fade-leave-to{opacity:0}.mensagem-reply{padding:5px 10px;font-size:.75rem;color:#666;transition:background-color 150ms ease-in-out;border-radius:5px;margin:5px 0;overflow:hidden;max-width:100%}.mensagem-reply p{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.message-reply-principal{border-left:3px solid transparent;background-color:rgba(100,100,100,.1)}.message-reply-principal:hover{background-color:rgba(100,100,100,.2)}.message-reply-outros{background-color:#f5f5f5;border-left:3px solid var(--message-color)}.message-reply-outros:hover{background-color:#ebebeb}.mensagem-reply-vazia{display:flex;align-items:center}.mensagem-reply-vazia svg{margin-right:5px;color:#ba181b}.mensagem{padding:14px 7px;border-radius:5px;min-width:150px;min-height:60px;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;position:relative;max-width:80%;margin-bottom:10px;font-size:.75rem;word-break:break-word;-webkit-box-shadow:0 3px 1px -2px rgba(0,0,0,.2),0 2px 2px 0 rgba(0,0,0,.14),0 1px 5px 0 rgba(0,0,0,.12);-moz-box-shadow:0 3px 1px -2px rgba(0,0,0,.2),0 2px 2px 0 rgba(0,0,0,.14),0 1px 5px 0 rgba(0,0,0,.12);box-shadow:0 3px 1px -2px rgba(0,0,0,.2),0 2px 2px 0 rgba(0,0,0,.14),0 1px 5px 0 rgba(0,0,0,.12)}.mensagem.max-w-60{max-width:60%}.mensagem.mapa{width:100%}.mensagem.hist-msg{animation:show 1s}.mensagem a{margin-right:5px;font-weight:550;color:inherit;text-decoration:none}.mensagem a:hover{text-decoration:underline}.message p{white-space:pre-wrap}.mensagem-anexo a,.mensagem-div-mapa a{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.reply{cursor:pointer;position:absolute;right:53px;bottom:5px;font-size:.6rem;color:#67a332;width:.9rem;height:.9rem;display:flex;justify-content:center;align-items:center;border-radius:50%;background-color:#fff}.reply svg{margin-top:-1px;margin-right:-1px}.reply-with-2-icons{right:30px}.check{cursor:pointer;position:absolute;right:10px;bottom:2px;font-size:.7rem}.check.visualizado,.check.visualizado svg{color:#006daa}.check.verde,.check.verde svg{color:#4f772d}.check.vermelho,.check.vermelho svg{color:#ba181b}.check.cinza,.check.cinza svg{color:#999}.check.preto,.check.preto svg{color:#666}.star{cursor:pointer;position:absolute;right:30px;bottom:2px;font-size:.4rem;width:11.2px}.default-stick-size{width:180px;height:auto}.horario-envio{margin-right:15px;font-size:.7rem;position:absolute;left:10px;bottom:2px}.autor-mensagem{position:absolute;font-size:.6rem;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;max-width:90%;font-weight:700;top:2px}.mensagem__principal{width:100%;display:flex;justify-content:flex-end}.mensagem__principal>.mensagem::after{content:\"\";width:0;height:0;position:absolute;border-left:10px solid transparent;border-right:10px solid transparent;border-top:10px solid var(--message-color);bottom:5px;right:-10px;transform:rotate(-90deg)}.mensagem__principal>.mensagem{background-color:var(--message-color);color:var(--text-color)}.mensagem__principal>.mensagem .horario-envio{color:var(--text-color)}.mensagem__principal>.mensagem .autor-mensagem{right:5px;color:var(--text-color)}.mensagem__outros{width:100%;display:flex}.mensagem__outros>.mensagem{background-color:#fff;color:#333}.mensagem__outros>.mensagem::after{content:\"\";width:0;height:0;position:absolute;border-left:10px solid transparent;border-right:10px solid transparent;border-top:10px solid #fff;bottom:5px;left:-10px;transform:rotate(90deg)}.mensagem__outros>.autor-mensagem{left:5px;color:#333}.mensagem-div-mapa{width:100%;display:flex;justify-content:center;align-items:center;flex-direction:column;margin-bottom:5px}.msg-mapa{width:100%;min-height:225px;height:100%;box-sizing:initial}.msg-mapa img{max-width:none!important}.info-mapa{list-style-type:none}.info-mapa li.title{font-size:.85em}.info-mapa li.address,.info-mapa li.url{font-size:.85em}.info-mapa li.url{font-size:.85em}.tooltip-list{margin:0;padding:0;display:flex;flex-direction:column;justify-content:center;align-items:flex-start}",
     map: undefined,
     media: undefined
   });
@@ -12527,7 +12805,7 @@ var __vue_inject_styles__$5 = function __vue_inject_styles__(inject) {
 var __vue_scope_id__$5 = undefined;
 /* module identifier */
 
-var __vue_module_identifier__$5 = "data-v-17719010";
+var __vue_module_identifier__$5 = "data-v-79ea3333";
 /* functional template */
 
 var __vue_is_functional_template__$5 = false;

package/package.json

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

package/src/lib-components/Messages/ChatMessages.vue

@@ -9,6 +9,13 @@
         :dictionary="dictionary"
       />
     <div v-else class="mensagem" :class="{mapa, 'hist-msg' : histMsg, 'max-w-60' : link && !mapa}">
+      <div v-if="isReply" class="mensagem-reply" :class="`message-reply-${origem}`">
+        <p v-if="replyMessage" v-html="replyMessage"></p>
+        <span v-else class="mensagem-reply-vazia">
+          <fa-icon :icon="['fas', 'times']" v-if="showReplyIcon" />
+          {{ defaultReplyMessage ? defaultReplyMessage : dictionary.mensagem_reply_padrao }}
+        </span>
+      </div>
       <template v-if="anexos && anexos.length">
         <div class="mensagem-anexo" v-for="(anexo, index) in anexos" :key="index">
           <AnexoMensagem :dictionary="dictionary" :anexo="anexo" :origemExterna="origemExterna" :dominio="dominio" @abrir-imagem="abrirImagem" @download-all="$emit('download-all')"/>
@@ -78,7 +85,7 @@ import LinkPreview from './LinkPreview'
 
 export default {
   components: { AnexoMensagem, InteratividadeBotoes, InteratividadeFormulario, LinkPreview },
-  props: ["smartchannel", "messageIndex", "dictionary", "autor", "origem", "msg", "link", "anexo", "imgAnexo", "tipoDoc", "docAnexo", "nomeArquivo", "audio", "video", "horario", "status", "logo", "msgTooltip", "seq", "mapa", "histMsg", "erro", "msgErro", "origemExterna", "anexos", "dominio", "corMsg", "interatividade", "msgReply", "hasReply", "iniDialogo", "dialogoId", "dialogoOrigem", "expSessao", "referenceSelector"],
+  props: ["smartchannel", "messageIndex", "dictionary", "autor", "origem", "msg", "link", "anexo", "imgAnexo", "tipoDoc", "docAnexo", "nomeArquivo", "audio", "video", "horario", "status", "logo", "msgTooltip", "seq", "mapa", "histMsg", "erro", "msgErro", "origemExterna", "anexos", "dominio", "corMsg", "interatividade", "msgReply", "hasReply", "iniDialogo", "dialogoId", "dialogoOrigem", "expSessao", "referenceSelector", "replyMessage", "isReply", "defaultReplyMessage", "showReplyIcon"],
   created() {
     if(!this.$root.$refs.chatMessages) this.$root.$refs.chatMessages = this
   },
@@ -299,6 +306,47 @@ export default {
     opacity: 0;
   }
 
+  .mensagem-reply {
+    padding: 5px 10px;
+    font-size: .75rem;
+    color: #666;
+    transition: background-color 150ms ease-in-out;
+    border-radius: 5px;
+    margin: 5px 0;
+    overflow: hidden;
+    max-width: 100%;
+  }
+  .mensagem-reply p {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .message-reply-principal {
+    border-left: 3px solid transparent;
+    background-color: rgba(100, 100, 100, 0.1)
+  }
+  .message-reply-principal:hover {
+    background-color: rgba(100, 100, 100, 0.2);
+  }
+
+  .message-reply-outros {
+    background-color: rgb(245, 245, 245);
+    border-left: 3px solid var(--message-color);
+  }
+  .message-reply-outros:hover {
+    background-color: rgb(235, 235, 235)
+  }
+
+  .mensagem-reply-vazia {
+    display: flex;
+    align-items: center;
+  }
+  .mensagem-reply-vazia svg {
+    margin-right: 5px;
+    color: #ba181b;
+  }
+
   .mensagem {
     padding: 14px 7px;
     border-radius: 5px;