vue-intergrall-plugins 0.0.263 → 0.0.265

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

@@ -1857,6 +1857,50 @@ var createPopper = /*#__PURE__*/popperGenerator({
 //
 //
 //
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
 var script$y = {
   data() {
     return {
@@ -1864,7 +1908,9 @@ var script$y = {
       regexVars: /{{var_\d}}/g,
       lastVar: 0,
       htmlInputString: `<input type='text' class='input-var input-var-${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: []
     };
   },
 
@@ -1897,6 +1943,28 @@ var script$y = {
       required: true
     }
   },
+  computed: {
+    hasFooterComponent() {
+      if (!this.template.components || !this.template.components.length) return false;
+      const types = [];
+      this.template.components.forEach(({
+        type
+      }) => types.push(type));
+      if (types.includes('footer')) return true;
+      return false;
+    },
+
+    hasButtonOrFooterComponent() {
+      if (!this.template.components || !this.template.components.length) return false;
+      const types = [];
+      this.template.components.forEach(({
+        type
+      }) => types.push(type));
+      if (types.includes('button')) return true;
+      return this.hasFooterComponent;
+    }
+
+  },
 
   created() {
     this.$root.$refs[`template-single-${this.identifier}`] = this;
@@ -1905,6 +1973,7 @@ var script$y = {
   mounted() {
     if (this.allVariables) this.getListOpts();
     this.setInputs();
+    this.setImageVar(false);
   },
 
   updated() {
@@ -1933,6 +2002,7 @@ var script$y = {
           target: input
         }, input.id.replace(/[{}]+/g, ''));
       });
+      this.setImageVar(false);
     },
 
     getListOpts() {
@@ -1942,17 +2012,131 @@ var script$y = {
       </ul>`;
     },
 
+    fileUpload(event) {
+      try {
+        const 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);
+        }
+
+        const file = allFiles[0];
+        const {
+          type,
+          name
+        } = file;
+        const 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: `(${type}) ${this.dictionary.msg_arquivo_invalido}`
+          });
+          return this.setImageVar(false);
+        }
+
+        const returnArrType = str => {
+          const arr = [];
+          validTypes.forEach(currentType => {
+            if (currentType.indexOf(str) > -1) arr.push(currentType);
+          });
+          return arr;
+        };
+
+        const imageTypes = returnArrType('image/');
+        const docTypes = returnArrType('application/');
+        const audioTypes = returnArrType('audio/');
+        const videoTypes = returnArrType('video/');
+        const isPdf = type.indexOf('application/pdf') > -1;
+        let sizeInBytes = 0;
+        Array.from(allFiles).forEach(file => sizeInBytes += file.size);
+        const 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);
+        }
+
+        const max = imageTypes.includes(type) ? 5 : 15;
+
+        if (sizeInMb >= max) {
+          this.$toasted.global.defaultInfo({
+            msg: `Limite de ${max} MB por arquivo`
+          });
+          return this.setImageVar(false);
+        }
+
+        const fileReader = new FileReader();
+        let current_icon = 'file-alt',
+            current_color = 'blue',
+            setValues = true;
+
+        if (imageTypes.includes(type)) {
+          setValues = false;
+          fileReader.readAsDataURL(file);
+
+          fileReader.onload = () => {
+            const image_preview = fileReader.result;
+            this.headerFiles[0] = {
+              file,
+              image_preview,
+              current_icon,
+              current_color,
+              name
+            };
+            this.$forceUpdate();
+            this.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,
+            current_icon,
+            current_color,
+            name
+          };
+          this.$forceUpdate();
+          this.setImageVar(file);
+        }
+      } catch (error) {
+        console.error("Erro file upload: ", error);
+      }
+    },
+
+    triggerInputFile(origin) {
+      if (this.$refs[`ts-input-${origin}`]) {
+        const elem = this.$refs[`ts-input-${origin}`][0] ? this.$refs[`ts-input-${origin}`][0] : this.$refs[`ts-input-${origin}`];
+        elem && elem.click();
+      }
+    },
+
     setInputs() {
       let qtdInputs = 0;
       const header = document.querySelector("#template_header");
       const body = document.querySelector("#template_body");
       const footer = document.querySelector("#template_footer");
+      let hasText = false;
 
       if (header !== null) {
         header.querySelectorAll(`.input-var-${this.identifier}`).forEach(input => {
           this.setEvent(input);
         });
         qtdInputs += header.querySelectorAll(`.input-var-${this.identifier}`).length;
+        if (qtdInputs > 0 && header.innerText) hasText = true;
       }
 
       if (this.lastVar === 0) this.lastVar += 1;
@@ -1962,6 +2146,7 @@ var script$y = {
           this.setEvent(input);
         });
         qtdInputs += body.querySelectorAll(`.input-var-${this.identifier}`).length;
+        if (qtdInputs > 0 && body.innerText) hasText = true;
       }
 
       if (footer !== null) {
@@ -1969,9 +2154,10 @@ var script$y = {
           this.setEvent(input);
         });
         qtdInputs += footer.querySelectorAll(`.input-var-${this.identifier}`).length;
+        if (qtdInputs > 0 && footer.innerText) hasText = true;
       }
 
-      if (qtdInputs === 1) {
+      if (qtdInputs === 1 && !hasText) {
         document.querySelector(`.input-var-${this.identifier}`).parentElement.style.width = "100%";
         document.querySelector(`.input-var-${this.identifier}`).style.width = "100%";
       } else if (qtdInputs === 0) {
@@ -2079,6 +2265,19 @@ var script$y = {
       return isValueValid;
     },
 
+    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(event, key, notificar) {
       if (event && event.target) {
         key = event.target.id.replace(/[{}]+/g, '');
@@ -2192,8 +2391,10 @@ var __vue_render__$y = function () {
     staticClass: "ts-content"
   }, _vm._l(_vm.template.components, function (component, cIndex) {
     return _c('div', {
-      key: cIndex
+      key: cIndex,
+      class: "" + (component.type == 'footer' ? 'order-1 custom-box-shadow-bottom' : '') + (_vm.template.components.length == 1 ? 'custom-box-shadow-bottom' : '')
     }, [component.type === 'header' ? _c('header', {
+      class: "" + (_vm.template.components.length == 1 ? 'border-radius-5 custom-border-gray' : ''),
       attrs: {
         "id": "template_header"
       }
@@ -2208,11 +2409,81 @@ var __vue_render__$y = function () {
         domProps: {
           "innerHTML": _vm._s(param.text)
         }
-      })] : _vm._e()], 2);
+      })] : param.type == 'image' ? _c('div', {
+        staticClass: "ts-image-type"
+      }, [_c('input', {
+        ref: "ts-input-header-" + pIndex,
+        refInFor: true,
+        staticClass: "d-none",
+        attrs: {
+          "type": "file",
+          "accept": _vm.acceptedExtensions
+        },
+        on: {
+          "change": function ($event) {
+            return _vm.fileUpload($event);
+          }
+        }
+      }), _vm._v(" "), _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 ($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 ($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 ($event) {
+            return _vm.triggerInputFile("header-" + pIndex);
+          }
+        }
+      })], 2) : _vm._e()], 2);
     }), 0) : _vm._e(), _vm._v(" "), component.type === 'body' ? _c('section', {
-      class: {
-        'margin-bottom': _vm.template.components.length === 2
-      },
+      class: (_vm.template.components.length == 1 ? 'border-radius-5 custom-border-gray' : '') + " " + (!_vm.hasButtonOrFooterComponent ? 'custom-footer-style custom-box-shadow-bottom custom-border-gray' : ''),
       attrs: {
         "id": "template_body"
       }
@@ -2228,7 +2499,22 @@ var __vue_render__$y = function () {
           "innerHTML": _vm._s(param.text)
         }
       })] : _vm._e()], 2);
+    }), 0) : _vm._e(), _vm._v(" "), component.type == 'button' ? _c('section', {
+      class: (_vm.template.components.length == 1 ? 'border-radius-5 custom-border-gray' : '') + " " + (!_vm.hasFooterComponent ? 'custom-footer-style custom-box-shadow-bottom' : ''),
+      attrs: {
+        "id": "template_buttons"
+      }
+    }, _vm._l(component.parameters, function (param, pIndex) {
+      return _c('div', {
+        key: pIndex,
+        staticClass: "ts-button"
+      }, [param.text ? _c('p', {
+        domProps: {
+          "innerHTML": _vm._s(param.text)
+        }
+      }) : _vm._e()]);
     }), 0) : _vm._e(), _vm._v(" "), component.type == 'footer' ? _c('footer', {
+      class: "" + (_vm.template.components.length == 1 ? 'border-radius-5 custom-border-gray' : ''),
       attrs: {
         "id": "template_footer"
       }
@@ -9984,7 +10270,7 @@ var __vue_render__$i = function () {
     staticClass: "ts-content"
   }, [_c('section', {
     class: {
-      'tm-container': _vm.hasButton
+      'tm-container custom-box-shadow-bottom': _vm.hasButton
     }
   }, [_c('TextFooter', {
     ref: "text-footer-template-message",
@@ -10098,7 +10384,8 @@ var script$h = {
     return {
       templateOptions: [],
       codTemplate: {},
-      selectedTemplate: null
+      selectedTemplate: null // hasFile: false
+
     };
   },
 
@@ -10169,7 +10456,8 @@ var script$h = {
         });
       } else {
         this.selectedTemplate = null;
-      }
+      } // if(this.hasFile) this.setFileVar(false)
+
 
       this.adjustOnSelect();
     },
@@ -10256,6 +10544,11 @@ var script$h = {
       this.$emit("template-data", this.selectedTemplate);
     },
 
+    setFileVar(file) {
+      // this.hasFile = file ? true : false
+      this.$emit("set-file-var", file);
+    },
+
     setMessage(message) {
       this.$emit("static-message", message);
     }
@@ -10311,6 +10604,7 @@ var __vue_render__$h = function () {
   })])], 1), _vm._v(" "), _vm.selectedTemplate ? [_vm.selectedTemplate.components ? _c('div', {
     staticClass: "tg-component"
   }, [_c('TemplateSingle', {
+    key: _vm.codTemplate,
     attrs: {
       "template": _vm.selectedTemplate,
       "hasButton": _vm.hasButton,
@@ -10321,6 +10615,7 @@ var __vue_render__$h = function () {
     },
     on: {
       "set-vars": _vm.setFinalMessage,
+      "set-file-var": _vm.setFileVar,
       "click-trigger": function ($event) {
         return _vm.$emit('click-trigger');
       }
@@ -10347,8 +10642,8 @@ var __vue_staticRenderFns__$h = [];
 
 const __vue_inject_styles__$h = function (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
   });
@@ -13208,7 +13503,7 @@ var script$5 = {
     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;
@@ -13490,7 +13785,20 @@ var __vue_render__$5 = function () {
       '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"
@@ -13750,8 +14058,8 @@ var __vue_staticRenderFns__$5 = [];
 
 const __vue_inject_styles__$5 = function (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
   });